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.

fields vertically aligned: GF markup issue

  1. It seems as though you can't have fields vertically aligned to the middle of a page. The markup is generated by Gravity Form and can't be changed. Yes, CSS is something we can modify... but we cannot have UL LI markup changed to table - tr td markup, which is what would be required to have verticially aligned labels.

    From this thread: http://www.gravityhelp.com/forums/topic/vertical-alignment-of-field-labels

    "Because things are floated and you can have variable heights on things (inputs can be different heights than selects or textareas), there really is no silver bullet to align things to the middle of the space vertically with one declaration. The vertical-align CSS property is damn near useless these days and wouldn't work here, especially cross-browser. Line-height or padding will be your safest bet."

    Can't use padding either, as it will make changes to all of the fields, and to different browsers.. it reacts differently as all the elements are floated.

    I referred to http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes but this didn't help either. Any ideas how to achieve this?

    Posted 12 years ago on Sunday November 11, 2012 | Permalink
  2. Do you have a URL for the page where your form is embedded, and a description of which elements you want to align?

    Posted 12 years ago on Monday November 12, 2012 | Permalink
  3. The form is at http://www.sandiegopchelp.com/services/mail-in-repair

    For example, trying to shorten the length of "description of problem" so that it's the same length as the field above it "Device make and model." Then I would be putting the tooltips to the right of the fields. It would look great and be functional!

    Posted 12 years ago on Monday November 12, 2012 | Permalink
  4. David Peralty

    So I tried:

    .gform_wrapper textarea.textarea {
    width: 33.5% !important;
    }

    And that changed it to be the same as the field above it in width. Let me know if that helps.

    Posted 12 years ago on Monday November 12, 2012 | Permalink