Question

Forms CSS code- Place fields side by side

Forms Web Customizations

Updated September 26, 2016

asked on September 23, 2016 • Show version history

I am not familiar with CSS coding but what I am trying to do should be pretty simple. I'm trying to have the fields zip code, city, & state be side by side instead of how they are currently displaying below. What would be the code to do this?

Thanks!

1 0

Replies

replied on September 23, 2016

Well, you could put the labels on top...this would buy you some more room if you need all 3 fields on the same row, like this:

#q6, #q7, #q5 {display: inline-block; vertical-align:top;}
#q6 .cf-medium {width: 100%;}
#q6 .cf-field {width: 150px;}
#q7 .cf-medium {width: 100%;}
#q7 .cf-field {width: 150px;}
#q5 .cf-medium {width: 100%;}
#q5 .cf-field {width: 150px;}

Then play with the padding, but here is how it will look at 900 on the form size:

2 0

replied on September 24, 2016

This is the CSS I always use so that i can adjust the label and field sizes precisely by the number of pixels per item. You would simply adjust the pixel value per item to make the field or label wider or shorter.

#q1 label {width: 170px;}
#q1 .cf-small {width: 150px;}
#q1 .cf-field {width: 150px;}


#q2 label {width: 120px;}
#q2 .cf-small {width: 180px;}
#q2 .cf-field {width: 180px;}

#q1, #q2 {display: inline-block;

2 0

replied on September 23, 2016

Thanks!

I got it to display like this now. Would I just adjust the width fields to get it to align how I want or is there another type of code that needs to be inserted to align them?

1 0

replied on September 26, 2016

Jorge,

You can add some lines to affect each group of fields, for example in the following picture I have added a line to set the width between the first field and the second field, and then another line to give more space between the second field and the third field:

#q6, #q7{width: 180px;}
#q7, #q5{width: 300px;}

1 0

replied on September 26, 2016

Thanks all! I'm starting to organize the form much better using those CSS code examples.

I'm trying to get it all to fit in one page (to print). Do you know how to decrease the vertical space in Laserfiche forms? It almost seems like the form is double spaced by default.

1 0

You are not allowed to follow up in this post.

Question

Question

Forms CSS code- Place fields side by side

Replies

Sign in to reply to this post.