Question

Display fields side by side in Forms Mobile

Forms Mobile

Updated January 22, 2018

asked on January 19, 2018

I am hoping someone here can help me. I am creating a form for some electrical testing. The user will fill in their test results, but often electrical tests have different metric units of measure (kilo, hecto, deka, deci, centi, milli). So I would like the user to be able to easily select that unit from a drop down. Here is the trick, the default way for this to show on mobile would for the 'unit' field to show under the actual measurement field. How could I use CSS to show the unit field on the same row, and not break the responsive layout features, something like this:

0 0

Replies

replied on January 22, 2018

From the Forms Help page:

Displaying fields side by side

In the CSS section of the CSS and JavaScript page, insert the following code, replacing ID with the ID of the specified field. You can see the ID and class for each field on your form by clicking Show CSS Selectors, which should be enabled by default.

You can display fields side by side using the styling the display property. This is useful if you have more than two fields that should be displayed side by side. With this method you must also specify the width of each element. When the height of each element is different, specify that they should be vertically aligned with the top of their container.

#ID1, #ID2, #ID3 {display: inline-block; width: 30%; vertical-align:top;}

My example

CSS Script

#q5, #q6 {display: inline-block; width: 30%; vertical-align:top;}

note:

The two top boxes Ids #q3 and #q4 and #q5, #q6 are duplicated boxes below in line

0 0

replied on January 22, 2018

You may wish to consider using CSS that takes into account the size of your user's screen using @media queries. That way, you could more accurately control how it renders at the screen sizes you specify. For more information, please see this MDN Web Docs file. You may need to set the !important flag on some CSS applied this way, since Forms does have responsive styling of its own.

0 0

You are not allowed to follow up in this post.

Question

Question

Display fields side by side in Forms Mobile

Replies

Sign in to reply to this post.