Question

How compact can i make a form?

Updated May 14, 2015

asked on May 12, 2015

Hi all,

I've been pulling hairs trying to get forms to look as compact as possible. If anyone can help me out, that be great. Here is a screen shot of what I have so far.

I want to close that gap between the fields so they can be right next to each other. Is that possible? I set the form setting to have Label Alignment = "Top". Here is my CSS code

#q1 .cf-medium {width: 100%;}
#q1 .cf-field {width: 150px;}

#q2 .cf-medium {width: 100%;}
#q2 .cf-field {width: 150px;}


#q3 .cf-medium {width: 100%;}
#q3 .cf-field {width: 150px;}

#q1, #q2, #q3 {display: inline-block; vertical-align:top;}

Below is my justification for my css

Any help would be greatly appreciated. Thanks!

0 0

Answer

SELECTED ANSWER

replied on May 13, 2015

have you gotten this to work? If not, please let me know and maybe I can help further

0 0

Replies

replied on May 12, 2015 • Show version history

That image is for regular method, but you made the labels be above the input box.

try this:

.cf-field {width: 150px;}
#Field1, #Field2, #Field3{width:100%;}

#q1, #q2, #q3 {display: inline-block; vertical-align:top;}

I found a better way to do this, makes it a little easier to repeat as needed:

.cf-field {width: 150px;}
input[id*='Field'] {width:100%;}

#q1, #q2, #q3 {display: inline-block; vertical-align:top;}

0 0

replied on May 12, 2015

Hey Kenneth,

Thanks for your reply, appreciate you taking the time to help out. I tried both samples of your css, no dice.

This image below is from your first code. Couple questions, As you can see, it looks like the .cf-field isn't applying to the 3 fields because each field takes up 100% of their line. I altered the code by putting #q1, #q2, #q3 in front of .cf-field, didn't work. Also tried changing the 100% to match the width of 150px. Also didn't work.

Below is the screenshot of the second code you suggested. And below are the results, still that extra space. I've had success with this when the labels are to the left, just now trying the label on top.

.cf-field {width: 150px;}
input[id*='test1'] {width:100%;}

input[id*='test2'] {width:100%;}

input[id*='test3'] {width:100%;}


#q1, #q2, #q3 {display: inline-block; vertical-align:top;}

0 0

replied on May 12, 2015 • Show version history

You do not need to repeat the input[id*='test'] three times. If you simply did it without the number it applies to all that contain that in the id.

Please try my second recommendation from my other post without modifying the code at all. The code on the CSS section should be like this:

and then you will see this:

0 0

replied on May 14, 2015

Worked out great! Thanks. Code makes sense now, set the field length to 150, and then set input boxes to maximize. I didn't know we could manipulate input boxes like that. Thought that was done by .cf-size.

0 0

replied on May 14, 2015

I am glad I could help. The amazing thing is there are multiple ways of doing things 99% of the time. It's always nice to learn about new ways as it can help inspire interesting new designs and practices. I will try to be clearer the first time around next time I suggest code. I am glad everything worked out

0 0

You are not allowed to follow up in this post.

Question

Question

How compact can i make a form?

Answer

Replies

Sign in to reply to this post.