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 Horizontal drop down fields In the same line

Gravity Support Forums » Plugin Support » Gravity Forms

  1. pikasostar
    Member

    2 HORIZONTAL DROP DOWN FIELDS IN THE SAME LINE .Is this possible with GRAVITYFORMS

    Checkout the screenshot
    http://imgur.com/Xosc2.png

    Posted 14 years ago on Friday May 14, 2010 | Permalink

  2. Kevin Flahaut
    Administrator

    Yep. You can easily do this with a little CSS. You simply float the first containing < li> and then the second field should align next to it horizontally.

    http://forum.gravityhelp.com/topic/data-fields-in-same-row#post-878

    Posted 14 years ago on Friday May 14, 2010 | Permalink

  3. Mattos
    Member

    Hi Kevin, I'm trying to get two fields to line up on the same line too, but seems that I'm missing something - could you take a quick look at my form - http://www.summerhouse-cornwall.com/newsite/?page_id=395

    I've added #gform_wrapper_1 #field_1_8, #gform_wrapper_1 #field_1_11 {float:left; display: inline; margin-right:10px!important; border: 1px solid #333;}

    to my theme stylesheet, you can see the two fields I want to line next to each other as I have temporarily added a border to them. Hope you can show me what I'm missing.

    Thanks.

    Posted 13 years ago on Tuesday April 26, 2011 | Permalink

  4. isuk
    Member

    Mattos, I assume you are using v1.5.x.x of Gravity Forms? In this case you don't need any user defined css classes to do what you want.

    Just add gf_left_half to the CSS Class Name field in the advanced tab for the first date selector field and gf_right_half to the second field that should belong to the same line.

    More examples can be found in the documentation: http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

    Posted 13 years ago on Tuesday April 26, 2011 | Permalink

  5. Kevin Flahaut
    Administrator

    @Mattos, @isuk is correct. You can use the built-in CSS Ready Classes for this. I did check your form and for those to work properly, you'll need to remove the rule you added on line 1073 of your style.css file. Also, there is a rule on line 354 that adds a 17px margin porperty which will prevent the Ready Class from working properly. You can remove that property or will have to override it with another rule for list items contained in the gform_wrapper class.

    test screenshot: http://grab.by/9YbF

    Posted 13 years ago on Tuesday April 26, 2011 | Permalink

  6. Mattos
    Member

    Great stuff, thanks guys, seems like things are even easier now with the css classes. All working now, cheers!

    Posted 13 years ago on Tuesday April 26, 2011 | Permalink

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