Custom form layout question « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Michael
Member

I have created a form on the following url: http://www.decoridesigns.info/style

What I would like to do is have a 4 column layout, but have the fields populate horizontally. What I did was make each field have a width of 25% and float left. I'm not sure why, but instead of having 3 rows of 4 fields, my result was 4 rows, the top row has 4 fields, the middle rows have 3 fields, and the bottom row has 2 fields.

What would you suggest to achieve my desired outcome instead of the appearance that I currently have?

Thank you,
Jason

Posted 13 years ago on Wednesday July 7, 2010 | Permalink
Kevin Flahaut
Administrator
looks like you missed one of the field ids in your rule. I believe that's causing the odd floating you're seeing. You can simplify this with some inheritance.. just target any list item in that checkbox list

try this
```
ul#input_4_1 {overflow:hidden;}
ul#input_4_1 li {float:left; width:25%;}
```
Now, there are some properties (margins, padding, etc) that may effect the width percentage, so for 4 columns, you may actually have to specify the width as 23% or something like that. It depends on what they inherit from other CSS rules but you can tinker with it and see what works.

Let me know if you still have problems and we'll proceed from there.
Posted 13 years ago on Wednesday July 7, 2010 | Permalink
Michael
Member

Thank you for your quick response. I tried your suggestion and the result is a one column layout down the left side of the page. I tried the code you gave me with 25% and 23% and with and without the code I previously had... all results gave me the one column layout.

Maybe this will help... Here's the line of code that I had previously that gave me the layout I described in the first post:

#field_4_1 .gchoice_1_1, .gchoice_1_2, .gchoice_1_3, .gchoice_1_4, .gchoice_1_5, .gchoice_1_6, .gchoice_1_7, .gchoice_1_8, .gchoice_1_9, .gchoice_1_10, .gchoice_1_11, .gchoice_1_12 {
float: left;
width: 23%;
}

Thank you,
Jason

Posted 13 years ago on Thursday July 8, 2010 | Permalink
Kevin Flahaut
Administrator
Jason,

I'm looking at your form with my code inspector and don't see any reference to either CSS rule now. When I'm looking at the CSS file directly, I see the rule at the bottom.

When running it through the validator checking for errors it was flagging that section. After some staring at it, I see the issue.. your syntax is wrong.. your brackets are mismatched.. both should be curly brackets.

It should be like this.
```
ul#input_4_1 {overflow:hidden;}
ul#input_4_1 li {float:left; width:25%;}
```
You won't need that last line with the specific field id's either, these should apply the rule to all the children of that list.
Posted 13 years ago on Thursday July 8, 2010 | Permalink
Michael
Member

It works! Thank you very much for your help. I feel kind of stupid for the bracket mistake... I appreciate you taking the time to examine it close enough to catch it.

Posted 13 years ago on Saturday July 10, 2010 | Permalink
Kevin Flahaut
Administrator

No worries. Glad you got it working.

Posted 13 years ago on Sunday July 11, 2010 | Permalink

This topic has been resolved and has been closed to new replies.