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

Question

Question

How can I place fields side by side?

asked on September 13, 2018

I am looking to place 3 sections in the same row but do not know how to do it.  Can someone assist?  A picture is attached.  Thanks!

budget form pic.JPG
0 0

Replies

replied on September 13, 2018 Show version history

Add a custom CSS class to each of the 3 sections called "inlineSection"

Then, add the following CSS to your form

.inlineSection {
  width:33%;
  display:inline-block;
}

Label/Field widths are percentage based, so you will need to do some more adjustment to make sure they're not too small, but something like the following will target those elements

.inlineSection .cf-label {
    /* adjust label width here if needed, defaults to 20% */
}

.inlineSection .cf-field input {
    /* adjust as needed, the .cf-field container defaults to 75% of*/
    width:95% !important;
}

You may need to use !important to override default styling.

 

Example of the end results with the sample CSS from above.

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

Sign in to reply to this post.