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.

Layout problems in Gravity Forms 1.5 beta 3.4

  1. Michael

    I have run into 2 problems with with Gravity Forms 1.5 beta 3.4.

    1) The existing form layout is no longer working correctly:
    With the last stable release of Gravity Forms, this form was working correctly. It had no scroll bar and the email and phone fields were lined up horizontally. The styling for this form was done through my style.css doc for my theme.
    Here's my code:

    2) Multi-column layout inconsistency:
    For each of the fields, I specified a 3 column layout using the CSS Ready Class gf_list_3col. On the desktop browser (tested in Safari, Firefox, and Chrome), I get a 2 column layout on each page. On the mobile browser (tested with iPhone and Android), I get the 3 column layout that I specified. I got the same result with Gravity Forms 1.5 beta 2.

    I appreciate any help in solving these errors and hope I have provided some help if they are, indeed, related to bugs in the latest beta version of Gravity Forms.

    Posted 13 years ago on Thursday December 2, 2010 | Permalink
  2. Please remove from line 2245 in style.css file : padding-left:20px; . Then all will go well for the first part. . I did it and the form looks fine now.

    However, I'm not able to determine the scroll bar issue. I would need more time. Perhaps Kevin might have the answer?

    Posted 13 years ago on Friday December 3, 2010 | Permalink
  3. Robert is correct, the additional left padding on line 2246 of your style.css file is causing the field to wrap below the first one. You'll need to either tweak the value, or remove the property all together. Honestly, you can remove the entire rule.. the float isn't needed nor the width property. It's kind of extraneous.

    As far as the scrolling, that's also related to too much vertical content somewhere. It's easily enough fixed by adding the following rule to your theme's style.css file.

    body .gform_wrapper ul.gform_fields {overflow:visible}

    On the checkboxes - the inconsistency isn't a fault of the form CSS, you've specified a margin on line 1776 of your style.css file that's adding just enough to force the third column to wrap. The list items are set to 33% width with 0 margin. That puts you at 99% of that available horizontal space taken up. Do the math.. if you add a 2 pix margin to each list item, that's 6 additional pixels of width.. in some browsers, that's enough to push it past what it considers the boundary and to wrap into a new line.

    Remove the margin property you added and it should work consistently. Alternately, you can redefine the 3 column class so the width is 32% or some lesser value if you feel you need to retain that left margin property for some reason.

    The best way to determine if formatting issues are related to the default forms vs. your theme is to see if the form is properly formatted in the preview page. if so, it's inheriting some additional properties from your theme.

    Hope that helps out. I'm always looking for ways to improve the CSS, but with the plethora of theme's out there and inconsistencies in CSS & markup in the theme's it's impossible to "bulletproof" the formatting in every situation. We'll do our best to keep it as simple as possible though.

    Posted 13 years ago on Friday December 3, 2010 | Permalink
  4. Michael

    Thank you very much for your advice. I do find it odd that only one of my 3 forms on the site had problems after the upgrade, but it's all fixed now. My margin is definitely the problem with the multi-page form. Your advice worked on that as well, but I think I'd rather make changes to my theme's css than the plugin to avoid the need to make changes after every upgrade.

    Thanks again!

    Posted 13 years ago on Friday December 3, 2010 | Permalink