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

Question

Question

CSS to Adjust Field Position - 2 fields in-line block

asked on April 16, 2018

I have two fields on a form that are displayed in-line block, and the first field has its label hidden (0 px), and it's help text displayed to the right.  I would like to move the first field further to the left to appear closer to the second field as it is a descriptor of the second field.  I need to leave the second field where it is, as it lines up with fields in a table further up in the form.  If anyone has a suggestion on how to achieve this through css I would appreciate it.  I've attached a screenshot of the form preview as well as the current css for the form.

 

Thank you!

#q2 label {width: 70px;}
#q2 .cf-medium {width: 150px;}
#q2 .cf-field {width: 150px;}
#q3 label {width: 70px;}
#q3 .cf-medium {width: 200px;}
#q3 .cf-field {width: 150px;}
#q2, #q3 {display:inline-block;}
#q4 label {width: 90px;}
#q4 .cf-medium {width: 200px;}
#q4 .cf-field {width: 200px;}
#q5 label {width: 75px;}
#q5 .cf-medium {width: 80px;}
#q5 .cf-field {width: 80px;}
#q37 label {width: 100px;}
#q37 .cf-medium {width: 275px;}
#q37 .cf-field {width: 275px;}
#q5, #q37 {display:inline-block;}
#q6 label {width: 150px;}
#q6 .cf-medium {width: 250px;}
#q6 .cf-field {width: 250px;}
#q7 label {width: 70px;}
#q7 .cf-medium {width: 100px;}
#q7 .cf-field {width: 100px;}
#q6, #q7 {display:inline-block;}
#q8 label {width: 110px;}
#q8 .cf-medium {width: 150px;}
#q8 .cf-field {width: 150px;}
#q9 label {width: 140px;}
#q9 .cf-medium {width: 200px;}
#q9 .cf-field {width: 150px;}
#q8, #q9 {display:inline-block;}
#q10 label {width: 200px;}
#q10 .cf-small {width: 70px;}
#q10 .cf-field {width: 70px;}
#q11 label {width: 200px;}
#q11 .cf-small {width: 70px;}
#q11 .cf-field {width: 70px;}
#q10, #q11 {display:inline-block;}
#q24 label {width: 440px; text-align: right;}
#q24 .cf-small {width: 100px;}
#q24 .cf-field {width: 150px;}
#q25 label {width: 0px;}
#q25 .cf-helptext {display: inline;}
#q25 .cf-small {width: 200px;}
#q25 .cf-field {width: 250px;}
#q26 label {width: 165px; text-align: right;}
#q26 .cf-small {width: 100px;}
#q26 .cf-field {width: 200px;}
#q25, #q26 {display:inline-block;}
#q27 label {width: 440px; text-align: right;}
#q27 .cf-small {width: 100px;}
#q27 .cf-field {width: 150px;}

 

Form Preview.png
Form Preview.png (30.71 KB)
0 0

Answer

SELECTED ANSWER
replied on April 16, 2018

Thank you.  I ended up just widening the label field to push the rest of the information to the right.  I couldn't get the width on the html field to set using css.

0 0
replied on April 16, 2018

Makes sense. I use this solution when there is an optional field and I want a blank space if the field stays hidden. It really isn't necessary in your scenario. Glad you got it working.

0 0

Replies

replied on April 16, 2018

I have used blank html variables to achieve this. I usually start with a descriptive word and then once it is set, remove all text from the html.

0 0
replied on April 16, 2018

Sorry, I am not experienced with CSS or Java and don't understand what you are suggesting.

0 0
replied on April 16, 2018

Add a html field to your form. This is another option, like single line or checkbox. I like to leave the default text until I've done the CSS. Next add the inline-block and width css for that variable. Once it formats correctly, update the html field with no info. 

 

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.