https://legacy.forums.gravityhelp.com/topic/left-align-label-and-2-column-after-first-few-rows Gravity Support Forums Topic: Left align label and 2 column after first few rows en-US Mon, 20 Apr 2026 04:53:55 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/left-align-label-and-2-column-after-first-few-rows#post-11204 Thu, 14 Oct 2010 15:36:48 +0000 myronr 11204@https://legacy.forums.gravityhelp.com/ <p>Hi Carl, Thanks for that. Works perfectly. I do have some questions on fields, but I think we can close this thread. Many thanks to the both of you for helping me out with this. </p> https://legacy.forums.gravityhelp.com/topic/left-align-label-and-2-column-after-first-few-rows#post-11202 Thu, 14 Oct 2010 15:17:43 +0000 Carl Hancock 11202@https://legacy.forums.gravityhelp.com/ <p>You would center align the submit button just like you would any element, by setting the text-align to center on the container. For the submit button this would be the gform_footer container. </p> <p>Add this to your CSS:</p> <p><code>.gform_footer {text-align: center;}</code></p> <p>Drop downs can be changed with CSS, however it isn't supported by all the browsers so it isn't consistent and not necessarily recommended if you want to be sure things look the same for all users.</p> <p>Here is information on how to style a drop down:</p> <p><a href="http://www.456bereastreet.com/lab/form_controls/select/" rel="nofollow">http://www.456bereastreet.com/lab/form_controls/select/</a></p> <p>You would have to target the options of the select fields. You would do so using this selector:</p> <p><code>.gfield_select option {your-styles: here;}</code> </p> https://legacy.forums.gravityhelp.com/topic/left-align-label-and-2-column-after-first-few-rows#post-11201 Thu, 14 Oct 2010 15:11:18 +0000 myronr 11201@https://legacy.forums.gravityhelp.com/ <p>Thanks for the hint. I have almost got things to look right. I cant seem to get a bit of spacing between the first two lines (just the bottom line and the input field seem off aligned though).<br /> Could you tell me how to center align the submit button? Also, is it possible to change the style of the drop down?<br /> Thanks so much for helping me fix all this. Its definitely starting to look the way I want. </p> https://legacy.forums.gravityhelp.com/topic/left-align-label-and-2-column-after-first-few-rows#post-11166 Thu, 14 Oct 2010 09:49:10 +0000 Kevin Flahaut 11166@https://legacy.forums.gravityhelp.com/ <p>looks like you need to set the width of each list item individually for them to float up the way you want. You'll probably want to define a height on those as well so they float properly and don't "hang" and give you that staggered/stacked look. </p> https://legacy.forums.gravityhelp.com/topic/left-align-label-and-2-column-after-first-few-rows#post-11160 Thu, 14 Oct 2010 04:25:14 +0000 myronr 11160@https://legacy.forums.gravityhelp.com/ <p>Hi Kevin, I think I have got most of it to work. Its only the first 3 fields that I cant get to align so that they appear in a single line. One more hint pleeese... </p> https://legacy.forums.gravityhelp.com/topic/left-align-label-and-2-column-after-first-few-rows#post-11157 Thu, 14 Oct 2010 02:20:41 +0000 Kevin Flahaut 11157@https://legacy.forums.gravityhelp.com/ <p>No worries. I'm happy to help out. Let us know how it goes. </p> https://legacy.forums.gravityhelp.com/topic/left-align-label-and-2-column-after-first-few-rows#post-11156 Thu, 14 Oct 2010 02:09:40 +0000 myronr 11156@https://legacy.forums.gravityhelp.com/ <p>Hi Kevin, Sorry about that. I didn't really expect a reply so soon, other side of the world n' all. I copied the form.css over to my style.css and sorted out a few more things so its a bit closer now. And now I know that that style of form is called a Madlib! I think I know what you mean so I'll try that out right now. Thanks for the quick reply. </p> https://legacy.forums.gravityhelp.com/topic/left-align-label-and-2-column-after-first-few-rows#post-11153 Thu, 14 Oct 2010 01:23:18 +0000 Kevin Flahaut 11153@https://legacy.forums.gravityhelp.com/ <p>Okay, was looking at your form and it disappeared. Guess you're working on it. Yes, you're CSS is kinda whack.</p> <p>From what I saw, disregarding what you're trying to do with the madlib format at the top, you were getting closer.</p> <p>What I suggest is copying the entire contents of the forms.css file from the plugin folder to your themes style.css file or making a new local copy of the forms.css and linking it up. Then, go to the form settings page and set the "output css" option to no. That way you're using only your local copy and you can make all the modifications you like without having to overwrite the other styles or worry about your customizations being overwritten when the plugin updates.</p> <p>So, he's the idea on the columns, you take the fields that you want to make columns.. in this 2 columns.. let say you have 5 fields.. so it would be something like this. You need to set the width, height, etc. on all of them the same so they float properly. Then, you only float every other one left so the second one will clear the float properly.</p> <p>Sample CSS</p> <pre><code>/* apply widths and heights to all */ #gform_wrapper_1 #field_1_7, #gform_wrapper_1 #field_1_8, #gform_wrapper_1 #field_1_9, #gform_wrapper_1 #field_1_10, #gform_wrapper_1 #field_1_11, #gform_wrapper_1 #field_1_12 {width:45%; height:200px;} /* only float the first one in each row */ #gform_wrapper_1 #field_1_7, #gform_wrapper_1 #field_1_9, #gform_wrapper_1 #field_1_11 {float:left; margin-right:10px;}</code></pre> <p>That's really all there is to it other than just tweaking things to your preference.</p> <p>Back to the madlib style format for the initial information, I would suggest using the inline HTML fields for the textual content before/between the inputs and just float all of the containing &lt;li &gt;'s so they're inline. You can use CSS to hide the actual field labels and won't have to do a lot of fancy stuff to override those label properties.</p> <p>Hope that points you in the right direction. </p> https://legacy.forums.gravityhelp.com/topic/left-align-label-and-2-column-after-first-few-rows#post-11150 Thu, 14 Oct 2010 00:59:15 +0000 myronr 11150@https://legacy.forums.gravityhelp.com/ <p>Hi</p> <p>I have been trying to align the label to the left of my fields without success. Followed the instructions in similar posts here, but the gravity form css seems to be overriding my css.<br /> Also, I would like to have a 2 column layout after about 5 single column rows - if this makes sense. I would like to have something like <a href="http://crowdfavorite.com/contact/" rel="nofollow">this</a><br /> Till now I have tried to replicate the fields and text on that page, using the code snippets in other posts, but its not quite right. My form is <a href="http://www.techcommunicating.co.nz/contact/" rel="nofollow">here</a>. Could someone please help me out? </p>