Question

SOLVED: Prevent Responsive Design

Forms Version 10 Laserfiche Mobile How To

Updated June 20, 2022

asked on June 20, 2022 • Show version history

Hello,

Is there any way when designing a form to prevent the "responsive design" ideology? We are making a form that we want to look a specific way no matter what. I don't care if the person filling it out is on a phone or a tablet or a small desktop window - I want them to see the same exact looking form; if they are on a smaller device or a small window, they can scroll left and right and up and down to find and fill fields - I need the form to not "respond" to window sizing at all. Given I can only access the CSS/JS and it seems this would be dictated by the HTML, is this even possible? Any idea would be greatly appreciated.

0 0

Answers

APPROVED ANSWER

replied on June 20, 2022 • Show version history

Have you unchecked/turned off "Optimize form layout on mobile devices" in the form settings?

1 0

SELECTED ANSWER

replied on June 20, 2022

SOLUTION:

So, I popped open a preview and F12'd it and noticed they had an HTML style class 'lf-responsive' right at the top, Ctrl+F'd around for 'responsive' and found they use :

$('html').addClass('lf-responsive');

to add it (some kind of jQuery thing I guess?) in a script tag. So I just dropped:

$('html').removeClass('lf-responsive');

and good to go, no more responsive design!

0 0

replied on June 20, 2022

You don't need JavaScript. There's a built-in setting for this.

3 0

Replies

replied on June 20, 2022

Hi,

A possible solution:

Add custom html blank and css class of box on the form layout.
Add the following to CSS :

@media(max-width: 500px) { /* controls for screen under 500px */
.box {
  background:red;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}
}

Basically, if the screen is under 500px, it will add a big red box; making the form unusable; but you could adjust color or have a specific image show, etc...

0 0

replied on June 20, 2022

I appreciate the creative approach. We do still want them to be able to fill it out though, we just don't want the window size to play any role in the appearance.
Thank you though!

0 0

You are not allowed to follow up in this post.

Question

Question

SOLVED: Prevent Responsive Design

Answers

Replies

Sign in to reply to this post.