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.

Move Widget Fields Closer Together

Gravity Support Forums » Plugin Support » Gravity Forms

  1. Ken11
    Member

    I have created a GF Widget in a Thesis sidebar - see http://www.helpwithmaths.com.au
    My goal is to shrink the form length as much as possible. I have managed to do this to a certain degree by adjusting top and bottom margins/padding of the heading and footer (by following other posts in this forum). But I have not been able to find anything that works on my site to reduce the spacing between the body fields.
    Can someone please advise me how to...
    1) Reduce the white space between the fields, and
    2) Move the labels in Name and Email to the left of their fields so the form can be shortened even further.
    Thanks in advance, Ken.

    Posted 12 years ago on Tuesday December 27, 2011 | Permalink

  2. Rob Harrell
    Member

    Try this out, place this in your theme's stylesheet:

    [css]
.gform_widget .gform_heading {
margin-bottom: 0 !important;
}
.gform_widget li {
margin-bottom: 0 !important;
}
.gform_widget .gfield_label {
margin-top: 5px !important;
}

    See if that works for you - I don't think moving your labels to the left is ideal here because the input fields would result to being extremely small in width because of the narrowness of the form.

    Posted 12 years ago on Tuesday December 27, 2011 | Permalink

  3. Ken11
    Member

    Thanks Rob - it worked great. Just 2 further questions on your code if I may...
    1) In line 1 - How did you know to go for the bottom margin in the "Heading" rather than the top margin in the "Body"? (I tried the body myself with no result)
    2) In line 4 - I do not understand the "li" command. What does it mean and how is it used?
    OK, really 3 questions ;-) Thx again, Ken.

    Posted 12 years ago on Tuesday December 27, 2011 | Permalink

  4. Rob Harrell
    Member

    Hey ken, no problem. I used Chrome Developer Tools to inspect the markup and see where the spacing was coming from. You can also use Firebug for Firefox to troubleshoot as well.

    The li is an HTML element called List Item. Our forms are structured using the li element for each field. Your theme had a declaration for your sidebar li that was taking precedence, so we overwrote that using classes that are output by Gravity Forms.

    Posted 12 years ago on Tuesday December 27, 2011 | Permalink

  5. Ken11
    Member

    Cheers Rob... I'll check it out. Thx.

    Posted 12 years ago on Wednesday December 28, 2011 | Permalink

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