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.

Float fields (left/right)

  1. I'm having a few issues trying to style a form regarding floats.

    I would like to have the form split into two so that:

    fields 1 2 & 3 are all floated to the left
    whilst 3&4 are floated to the right

    Although I can get field 4 to float right it sits below everything else so I am having to use a negative margin to place this higher. I cannot get field 3 to position correctly at all.

    Can you provide some pointers on the best approach to take with this.

    The current css as it stands is this:

    #gform_5 {width:560px;border:1px solid #AEAFB2;background:#f2f2f2;}
    li#field_5_3 {float:right;}
    li#field_5_5 {float:right;}
    #input_5_5 {width:300px;height:100px;}

    Posted 11 years ago on Tuesday June 8, 2010 | Permalink
  2. Okay, I think this is what you're going for. If not, I'm sure you can take what I've done and tweak it to your preference.

    Test Screenshot

    So, it's easiest to ditch the float idea, and absolutely position those two fields. Remember, you have to set the wrapper to position:relative for this. (notice, I applied the styles to the containing div and not the form element itself) From there, I just positioned the two containing list items, tweaked the widths, etc. until it looked right.

    So, here's what you do.

    First, enable the default Gravity Forms CSS (make sure the "output CSS" option is set to yes in the GF settings page) or, if you're embedding the form via a function call, you'll need to manually enqueue the scripts by placing a script block in your functions.php file. You can find that information in the documentation on embedding a form.

    After you've enabled the GF default CSS, you're good to go with the second part.

    Remove the CSS you already have in place, and replace it with this.

    #gform_wrapper_5  { margin:10px 0; border:1px solid #AEAFB2;background:#f2f2f2; position:relative;}
    #field_5_3, #field_5_5 {position:absolute;}
    #field_5_3 {top:0px; left:275px}
    #field_5_5 {top:55px; left:275px;}
    #field_5_1, #field_5_2, #field_5_4 {margin-left:10px;}
    #input_5_1, #input_5_2, #input_5_3, #input_5_4 {width:240px;}
    #input_5_5 {height:100px; width:244px; }
    #gform_wrapper_5 .gform_footer input.button {margin-left:15px;}

    That should get you rolling.

    If you need additional styling help, the Visual CSS Guide is a good place to get a lay of the land and run from there.

    Good luck.

    Posted 11 years ago on Tuesday June 8, 2010 | Permalink
  3. Kevin,

    Thanks a lot for that, that works exactly as I wanted.

    I had played with absolute positioning but neglected to make the wrapper relative so thanks for pointing that out.

    I'll get there in the end :)

    Posted 11 years ago on Wednesday June 9, 2010 | Permalink
  4. Wonderful! I'm glad that worked for you. Let us know if you need anything else.

    Posted 11 years ago on Wednesday June 9, 2010 | Permalink

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