You are viewing limited content. For full access, please sign in.

Question

Question

Setting Field Widths with CSS Code in New Forms Designer

Forms Version 11 Self-Hosted Forms Layout Designer How To
Updated June 6
asked on June 5

I have several fields that I need in the same row of my form. One of the fields has three different options, but only one of the options will be visible, based on field rules. I need whichever field is visible to take up 40% of the form width which should be fine because only one of the fields will ever show in the row at a time.  I'm using the CSS code below, but whenever I preview the form, none of the field size percentages are not working.  q28, q34, and q29 are interchangeable, so only one will show at a time. I need all the remaining fields to show with whichever one of those three is being used. The drag method in the forms designer seems to be overriding the CSS code. I hope that makes sense, thanks for your help. 

 

#q33 {display: inline-block; width:15%;}

#q28 {display: inline-block; width:40%;}

#q34 {display: inline-block; width:40%;}

#q29 {display: inline-block; width:40%;}

#q30 {display: inline-block; width:20%;}

#q32 {display: inline-block; width:5%;}

#q35 {display: inline-block; width:20%;}

0 0

Replies

replied on June 5

Is there another field that will trigger which field in your row shows?

0 0
replied on June 5

Yes, actually two fields.  First, a specific selection is required from #q15.  Then, based on the answer to #q33, one of these three fields will show: q28, q34, or q29.

0 0
replied on June 5

Have you tried adding !important to those three lines with the 40% width?

#q28 {display: inline-block; width:40% !important;}

#q34 {display: inline-block; width:40% !important;}

#q29 {display: inline-block; width:40% !important;}

To quote w3schools:  "The !important rule in CSS is used to add more importance to a property/value than normal.

In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element! "

It might not work, but worth a try.  I am not a CSS expert.

0 0
replied on June 6

No, that didn't work.  It works in the old form designer.  In the new form designer, the field width that you have on the design page seems to rule.  Thank you.

0 0
replied on June 6 • Show version history

I discovered that it works as it should if the fields are not part of a collection.  Is there a way to get CSS rules to work on fields that are in a collection?

0 0
replied on June 6
0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...