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.

2 Columns not Aligning to Top

  1. Hi There: I am new to this forum and Gravity Forms. I simply love this plugin but realize I have lots to learn.

    My first form that I am a little challenged with can be found here

    http://www.stonegateinn.com/hotel-packages/casino-getaway/

    My challenge is getting the 2 columns to align top. The instructions you provided were followed (re: top label alignment) yet the 2 columns do not seem to align top.

    Any ideas on how I can fix this?

    Thanks a bunch!

    Rob

    Posted 6 years ago on Tuesday November 6, 2012 | Permalink
  2. If you want to use the Ready Classes, then you need to use them together correctly. You need to use "gf_left_half" then "gf_right_half" together in succession. Doing them the way you are (stacking a group of lefts and rights) simply isn't going to work.

    You can re-order your form fields and then use the right & left classes so the form lays out properly, or you can always use the HTML blocks to introduce some new markup (add div containers, etc) and then float the containing elements, etc.

    You can refer to this older post about using the HTML blocks to add fieldsets.. the concept is exactly the same, you would just use div element containers if you didn't want the fieldsets. Once the new divs are added in the markup, you can position and style them however you would like.

    http://www.gravityhelp.com/forums/topic/fieldsets#post-17019

    I'd personally just go with reordering the form fields and using the Ready Classes together properly.

    Best of luck.

    Posted 6 years ago on Tuesday November 6, 2012 | Permalink
  3. Thanks a lot Kevin! I so wish I had a programmer's mind for this stuff. Sadly I do not so I am hoping you can shed a little more light on my challenge. This is what I want the form to look like http://stonegateinn.com/wp-content/uploads/2012/11/2-col-form.jpg

    I tried following your suggestions and suppose I am just not getting it. When you say 'You need to use "gf_left_half" then "gf_right_half" together in succession." What does that mean? The fieldset concept looks cool but again I can't seem to get my head around it. It does not matter what I do here I just can't seem to make this happen and know it's my own lack of understanding.

    I am hoping you can tell me (in terms I get) the easiest way to accomplish my goal http://stonegateinn.com/wp-content/uploads/2012/11/2-col-form.jpg

    Thanks,

    R

    Posted 6 years ago on Monday November 12, 2012 | Permalink
  4. David Peralty
    Administrator

    What Kevin was trying to say is that instead of thinking of it as a one column form broken half way through and placed side by side, try to think of it as a left side and a right side for each line. So you want to do what you've shown in an image it would be:

    First Name
    Casino Rama
    Last Name
    Shuttle Leave
    Email
    Shuttle Leave
    Phone
    Number of Passengers
    Notes
    Room Type

    Hope that makes more sense to you.

    Posted 6 years ago on Monday November 12, 2012 | Permalink
  5. Hey David: I think I am getting closer but still having troubles with top alignment. Now I have two columns (great) but they do not line up to the top properly. There's also lots of extra space between each field. Here's a screenshot of the way I am inserting the CSS http://stonegateinn.com/wp-content/uploads/2012/11/faq.png. Maybe I am not placing it properly?

    Thanks for the speedy response!

    Getting closer,

    Rob

    Posted 6 years ago on Monday November 12, 2012 | Permalink
  6. David Peralty
    Administrator

    In your style.css can you put:

    .gform_wrapper .top_label li.gfield.gf_right_half {
    width: 48% !important;
    }

    And see if that fixes it?

    Posted 6 years ago on Monday November 12, 2012 | Permalink
  7. Absolutely perfect!!!

    I inserted it into the base.css stylesheet and voila.

    Thanks very much for the help you guys, I appreciate it :-)

    R

    Posted 6 years ago on Monday November 12, 2012 | Permalink

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