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.

Aligning options next to each other

  1. By the way...Am in love with the plugin, certainly one of the best I have ever used on wordpress.

    I'd like to be able to condense my forms at times to save space. What I men more specifically is being able to align some options next to each other without having to have everything stacked.

    On this form I have made it would be great to have the "Salary / Renumeration" option in line with the "Location" option instead of one on top of each other.

    On the same form I would love to have the "required Japanese" and "required English Level" drop downs next to each other also.

    If you guys could point a very grateful and hard working guy like myself in the right direction I would be very thankful indeed.
    http://nagoya-info.com/jobs/submit-a-job/

    Posted 9 years ago on Monday September 12, 2011 | Permalink
  2. Try using the CSS Ready Classes to place the fields side by side. It's easy.. just apply the "gf_left_half" and "gf_right_half" classes to the respective fields and you should be good to go.

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

    screenshot: http://bit.ly/nseduZ

    Posted 9 years ago on Monday September 12, 2011 | Permalink
  3. Kevin,

    Thants brilliant. The only thing is i'm finding that with the single line text input boxes, the right border is being cut off the input box. Is this a matter of me adjusting some css?

    Posted 9 years ago on Monday September 12, 2011 | Permalink
  4. yes, the extra left and right padding you've defined in your stylesheet ( style.css line 1778 ) is adding to the overall width of the fields and causing them to be cropped by the container. If you remove the left/right padding there, you'll see that the fields fit properly.

    screenshot ( padding removed ): http://bit.ly/qQm7mR

    You can either remove the horizontal padding, or target those inputs and redefine the width percentage.. trimming it down a bit.

    You can try adding this to your theme stylesheet to redefine the widths

    [css]
    .gform_wrapper .top_label li.gfield.gf_left_half input,
    .gform_wrapper .top_label li.gfield.gf_right_half input {
        width: 95% !important
    }

    screenshot ( new widths ): http://bit.ly/nMcKj7

    Posted 9 years ago on Monday September 12, 2011 | Permalink