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.

Displaying 2 input fields next to each other

Gravity Support Forums » Plugin Support » Gravity Forms

  1. R Chilton
    Member

    I have 4 input fields all together. I want the first 2 side by side and then the next 2 under them side by side. Need some help with code.

    Posted 12 years ago on Monday March 19, 2012 | Permalink

  2. Kevin Flahaut
    Administrator

    http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

    Look for the "gf_inline" or "gf_left_half"/"gf_right_half" classes.

    Posted 12 years ago on Monday March 19, 2012 | Permalink

  3. R Chilton
    Member

    Great ~ that worked perfect. Now I'm using the an image as the submit button and on my second line I will have two input boxes and the inline with those I will have the submit button. If I use the gf_left_half and the gf_right_half to get the imput boxes in line how do I get the submit button inline as well.

    Thanks so much.

    Posted 12 years ago on Monday March 19, 2012 | Permalink

  4. Kevin Flahaut
    Administrator

    Cool. Glad that got you started. It will be easier to give more specific guidance if I can see the actual form. Can you post a URL where I can see it?

    Posted 12 years ago on Monday March 19, 2012 | Permalink

  5. R Chilton
    Member

    http://whistlerworks.com/clients/remax/site/

    as you can see I have the submit button very close to where I need it to be, but margin top is not working to get it into place. (It is the top form in the blue box)

    Thanks

    Posted 12 years ago on Monday March 19, 2012 | Permalink

  6. Rob Harrell
    Member

    Try this out:

    [css]
.gform_wrapper .gform_footer {
padding-top: 0 !important;
clear: none !important;
float: left;
margin: -15px 0 0 0 !important;
}
    Posted 12 years ago on Tuesday March 20, 2012 | Permalink

  7. Kevin Flahaut
    Administrator

    OR You can try this..

    [css]
input#gform_submit_button_2 {
    margin-left: 320px;
    margin-top: -45px;
    position: absolute;
}

    screenshot: http://bit.ly/GzNtXq

    but you're going to run into problems with the validation because your background image won't expand to accomodate the validation message and the validation styles. You're going to either have to omit the validation, figure out how to expand the container background or re-style/override the validation styles to make it work.

    screenshot: http://bit.ly/GzNtXq

    Either way, you're going to need to do a bit more work to get it right

    Posted 12 years ago on Tuesday March 20, 2012 | Permalink