Question

CSS or JavaScript for better Form Scaling on Mobile Devices

Laserfiche Forms Mobile

Updated November 2, 2018

asked on November 1, 2018

Hello,

I am using the following CSS to display some fields in an inline-block:

.Row1 {display:inline-block; width:25%; vertical-align:top;}

This looks great in a web browser but not the best on a mobile device (see attached screenshot). I unchecked the option to Optimize on mobile devices to see what it looked like but they then of course would have to scroll left and right on the form to see the rest of the fields.

Is there some additional CSS or JavaScript I could use that would have those fields in the display from top to bottom if they do not fit on the screen rather than squeezing them together to try and make them fit side-by-side?

Mobile Screenshot.jpg (239.27 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on November 1, 2018 • Show version history

You can have CSS do the detection itself. You just need to use @media queries.

Here's an example from the web (it's just a sample, you'll need to modify it to use normal Forms element names and classes):

/* On screens that are 992px wide or less, go from four columns to two columns */
@media (max-width: 992px) {
    .column {
        width: 50%;
    }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
        width: 100%;
    }
}

W3Schools reference

MDN Reference

1 0

Replies

replied on November 1, 2018

I got some good results when the "Optimize form layout on mobile devices" is unchecked:

See if that helps. Good luck!

0 0

View 1 previous reply

replied on November 1, 2018

You can detect if the screen resolution is 800 x 600 or less:

function detectmob() {
   if(window.innerWidth <= 800 && window.innerHeight <= 600) {
     return true;
   } else {
     return false;
   }
}

If it is, assume it is a mobile device and then alter the CSS. I would start by removing your .Row1 class. I don't think you want any of these CSS attributes if it is a mobile device:

display:inline-block;

width:25%;

vertical-align:top;

I would start there. Remove that class if it is a mobile device and see what you get. Start to add 'mobile friendly' CSS in if needed.

1 0

SELECTED ANSWER

replied on November 1, 2018 • Show version history

You can have CSS do the detection itself. You just need to use @media queries.

Here's an example from the web (it's just a sample, you'll need to modify it to use normal Forms element names and classes):

/* On screens that are 992px wide or less, go from four columns to two columns */
@media (max-width: 992px) {
    .column {
        width: 50%;
    }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
        width: 100%;
    }
}

W3Schools reference

MDN Reference

1 0

replied on November 2, 2018

This worked great, thanks a bunch!

1 0

You are not allowed to follow up in this post.

Question

Question

CSS or JavaScript for better Form Scaling on Mobile Devices

Answer

Replies

Sign in to reply to this post.