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.

CSS Alignment Issues

Gravity Support Forums » Plugin Support » Gravity Forms

  1. rcgroup
    Member

    Hi, I'm testing a new a form and having some problems with alignment.

    Issue 1: Drop down fields and a field to the right are joined together

    Issue 2: Spacing, is it possible to decrease the vertical spacing between different fields to further resemble the "preview" form. It is much more compact, I really like the way the form looks when I preview it but when my theme CSS is applied it changes a few things.

    Issue 3: When I entering the first name and press TAB it goes to a different form at the bottom of the page and not last name.

    http://www.rcgauto.net/shipping/quote/

    Thanks for your help.

    Posted 12 years ago on Monday April 2, 2012 | Permalink

  2. David Peralty

    Issue 1: In your layout.css around line 790, you have min-width: 232px which seems to be causing that specific issue.

    Issue 2: In your base.css around line 193 you have margin-bottom: 20px which is making the spacing be larger than you want. It is being applied to all input boxes.

    Both issue 1 and 2 have to do with the way the theme was coded, and so CSS inheritance is making a mess of the form. You'll have to adjust those two things in your stylesheets to make things look right.

    Issue 3: This is related to the Tab Index values. Gravity Forms defaults tab index values to start at 1 by default. Is one of your forms a Gravity Forms widget? If so, you can set the tab index manually for this form. I would suggest somewhere around 20 to be a good value for your specific form.

    Look at the following image for help: http://i.imgur.com/16iez.png

    If you want to change your main form's starting tab index value, you can add the following inside your shortcode: tabindex="X"

    Posted 12 years ago on Monday April 2, 2012 | Permalink

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