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

Question

Question

Trouble with Putting Fields Side-by-Side

Forms Version 9
Updated March 3, 2014
asked on February 28, 2014 • Show version history

I have a couple of fields I would like to put side-by-side. I have created a class called inline with the following attributes:

.inline {display:inline; width: 50%; vertical align:top; }

I have assigned the inline class to the two fields I want to be inline. Instead of being inline, they display like this:

 

0 0

Answer

SELECTED ANSWER
replied on February 28, 2014

Try display:inline-block instead of inline. Other than that, you may need to adjust the width a little.

2 0
replied on February 28, 2014

I swear I did that earlier and it didn't work. It worked this time though. Thank you.

0 0
replied on March 3, 2014

You're welcome!

0 0

Replies

replied on March 3, 2014

I am still having problems getting all of the fields to look good though when putting them side by side. I consider myself relatively good at CSS, but am still struggling. Would you mind taking a look at it for me? I removed my CSS styles from the export. http://1drv.ms/1eVL3Dh

0 0
View 6 previous replies
replied on March 3, 2014

I'll take a look. Are there particular sets of fields I should look at?

0 0
replied on March 3, 2014

Sorry, should have included those. The Last Name and First Name, DOB, Grade, and Gender. Thank you!

0 0
replied on March 3, 2014

This may not be immediately relevant, but if you find yourself doing customizations like this often, you may want to take a look at a front-end framework like Bootstrap or Foundation. They are fairly easy to learn (especially if you already know CSS/JavaScript) and they really make stuff like this trivial.

0 0
replied on March 3, 2014

If you are also able to put Case Manager and Case Manager Email Address next to each other, that would be greatly appreciated.

0 0
replied on March 3, 2014 
#q1, #q3, #q4, #q39, #q35 {display: inline-block;}

A rule like that (that targets the fields you want to display side-by-side) will get the fields in a row, and then you'll need to adjust the widths for each field until they look the way you want. The Adjusting Adjusting the width of a field's label and input box section on this page in the help has more information about adjusting field widths.

0 0
replied on March 3, 2014

Yeah, the inline part was the easy part. It's the adjusting the width's that is causing a headache. I'll keep playing with it.

0 0
replied on March 3, 2014 • Show version history 
#q1, #q3, #q4, #q39, #q35 {display: inline-block; width: 150px}
.cf-small {width:100%;}
#q1 .cf-label, #q3 .cf-label, #q4 .cf-label, #q39 .cf-label, #q35 .cf-label {width: 100%;}

Specifying a field width, and then setting the input box width (and label width if you don't want the label to wrap) to 100% should get you pretty close.

2 0
replied on March 3, 2014

Thank you Eric!

0 0
replied on March 3, 2014

You're welcome!

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

Sign in to reply to this post.

Details
Related Posts
Loading ...