PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Left align label and 2 column after first few rows

  1. Hi

    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.
    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 this
    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 here. Could someone please help me out?

    Posted 9 years ago on Thursday October 14, 2010 | Permalink
  2. Okay, was looking at your form and it disappeared. Guess you're working on it. Yes, you're CSS is kinda whack.

    From what I saw, disregarding what you're trying to do with the madlib format at the top, you were getting closer.

    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.

    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.

    Sample CSS

    /* 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;}

    That's really all there is to it other than just tweaking things to your preference.

    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 <li >'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.

    Hope that points you in the right direction.

    Posted 9 years ago on Thursday October 14, 2010 | Permalink
  3. 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.

    Posted 9 years ago on Thursday October 14, 2010 | Permalink
  4. No worries. I'm happy to help out. Let us know how it goes.

    Posted 9 years ago on Thursday October 14, 2010 | Permalink
  5. 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...

    Posted 9 years ago on Thursday October 14, 2010 | Permalink
  6. 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.

    Posted 9 years ago on Thursday October 14, 2010 | Permalink
  7. 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).
    Could you tell me how to center align the submit button? Also, is it possible to change the style of the drop down?
    Thanks so much for helping me fix all this. Its definitely starting to look the way I want.

    Posted 9 years ago on Thursday October 14, 2010 | Permalink
  8. 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.

    Add this to your CSS:

    .gform_footer {text-align: center;}

    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.

    Here is information on how to style a drop down:

    http://www.456bereastreet.com/lab/form_controls/select/

    You would have to target the options of the select fields. You would do so using this selector:

    .gfield_select option {your-styles: here;}

    Posted 9 years ago on Thursday October 14, 2010 | Permalink
  9. 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.

    Posted 9 years ago on Thursday October 14, 2010 | Permalink

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