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.
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.
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!
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.
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?
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.
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.
maybe the line numbers didn't sync, but no, it's the rule I listed above being applied to the .gfield class.
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.
LOL. Okay, good luck with it.