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.

Ready Classes columns overlap

  1. I could only find one other post about the fields staggering, and they were using some theme-specific hacks. I've tried to let this form

    http://www.phillycarshare.org/gas-reimbursement-form

    have two columns, but instead they alternate down the page. If I set it to 3 columns and use just left and right, they're on the same row. Not sure how to fix this.

    Posted 11 years ago on Wednesday May 25, 2011 | Permalink
  2. I don't see any Read Classes being output on the form you linked to. If Ready Classes aren't working properly it's going to be due to CSS being applied by your theme causing spacing issues, which can cause floats to wrap.

    Posted 11 years ago on Wednesday May 25, 2011 | Permalink
  3. Ach, sorry; I put it back on the live form to 1-column for now, wasn't thinking.
    I'll have to dig through the CSS (it isn't mine) to see what's being applied. Thanks!

    Posted 11 years ago on Wednesday May 25, 2011 | Permalink
  4. Usually when that happens it's because the theme styles apply margins or paddings to the list items that serve as the form field containers. The Ready Class widths are set as percentages to work a certain way, and if the list items inherit other properties that influence the width, then things get skewed and you get the odd "stacking" effect.

    The Ready Classes aren't "bulletproof" by any means.. they're just helper CSS classes that can still be superseded by the theme styling.

    Posted 11 years ago on Wednesday May 25, 2011 | Permalink
  5. Thanks for the clarification - I thought that might be it, and tried adding

    #gform_wrapper_2.gform_wrapper li { padding:0 0 0 0 }

    to the end our the site's CSS, but when that didn't work I thought I was on the wrong track. Is this the wrong format for that directive?

    Posted 11 years ago on Thursday May 26, 2011 | Permalink
  6. That's being applied properly, the problem is with another rule on line 126 of your style.css file. You're setting a 20px left margin that's causing the odd stacking when you try to use the layout in 2 columns.

    [css]
    .gfield {
        float: left;
        margin: 5px 0 0 20px !important;
        width: 270px;
    }

    If I disable the left margin, you'll see that the layout works.

    screenshot: http://grab.by/adGH

    You may want to revisit the CSS and apply a left margin to the main wrapper if you need that, or a padding to the containing div so everything looks centered properly in your content area.

    Hope that helps out.

    Posted 11 years ago on Thursday May 26, 2011 | Permalink
  7. Sorry for being dense - line 126 is the end of a block for header navigation:

    #nav li {
    	display:inline;
    	float:left;
    	margin:0 0 0 37px;
    }

    Is it that style bleeding into the content class? I didn't write this file and I'm having a hard time navigating the nests. Thanks for all the help.

    Posted 11 years ago on Thursday May 26, 2011 | Permalink
  8. maybe the line numbers didn't sync, but no, it's the rule I listed above being applied to the .gfield class.

    Posted 11 years ago on Thursday May 26, 2011 | Permalink
  9. Okay; obviously there are deeper issues here, but they're in my CSS and not GForms. Thanks again for the pointers; I'm off to get a crowbar.

    Posted 11 years ago on Thursday May 26, 2011 | Permalink
  10. LOL. Okay, good luck with it.

    Posted 11 years ago on Thursday May 26, 2011 | Permalink