Formating issues - checkboxes and space between

Gravity Support Forums » Plugin Support » Gravity Forms

laurabetterly
Member

I love this plugin and created a great form that hides and shows fields depending on the choices the customer makes in the first set of checkboxes, based on what they order. Didn't take long to figure out but the Conditional Logic piece is genius.

I have 2 sites this form has to go on and the first site worked great. I exported/imported the form to save hours of time in recreating the form, but in the 2nd site the formatting is fubar. I did a test form to see if that would work but it was still messed up. Forms show correctly in Preview but when added to the page they will appear on the checkboxes are messed up and there is no spacing between sections or fields. Obviously this has to do with the setting through the theme, which is Catalyst.

Is there a way to override all the theme formatting that is carrying through to the form in a simple way? You can see the messed up form at http://esquirecorp2.yadayadasandbox.com/forms/form-information-to-complete-your-order/ and the way it appears on the other site at http://divcorp2.yadayadasandbox.com/forms/form-information-to-complete-your-order/ (oddly enough, the font size on this one increased from how it was previously with the only thing I did on that site today was the export of the form).

Any suggestions?

Posted 13 years ago on Monday January 17, 2011 | Permalink
David Smith
Member

Hi Laura,

The second url (the divcorp2 one) does not appear to be working.

It sounds like you've got some theme styling issues on your hands. If you can get the "correct" version working, I'll take a look and see what kind of tips I can give you to get the other form looking the way you want it.

Posted 13 years ago on Monday January 17, 2011 | Permalink
laurabetterly
Member

Sorry for the wrong link. Correct link is http://diversified.yadayadasandbox.com/forms/post-order-form/. Like I said, layout is okay but font is larger than when I had been working with it yesterday. ("Correct one" is in Frugal theme, other one is Catalyst theme.)

Posted 13 years ago on Monday January 17, 2011 | Permalink
David Smith
Member

Hi Laura... sorry, but it looks like the site at that URL is currently returning an error: http://grab.by/8qFw -- I'll check back soon.

Posted 13 years ago on Monday January 17, 2011 | Permalink
Kevin Flahaut
Administrator
line 914 of the themes css.php file sets a 16px font size for all unordered lists in the "cms_postarea" container
```
.cms_postarea ul {
    color: #111111 !important;
    font-family: Arial,sans-serif;
    font-size: 16px;
    line-height: 160%;
}
```
That's where the font size is coming from. You can override that with a more specific CSS rule added to your custom.css file

body .cms_postarea .gform_wrapper ul {font-size:13px}

screenshot: http://grab.by/8r4J

As far as overriding theme styles, no, there's no way to fully do this. Gravity Forms are designed to inherit much of their styling from the theme itself. If you want to override theme styles, you'll have to add new, more specific rules to your theme stylesheet to control the layout.

Other than the font size, I'm not sure what you're referring to in regards to the second form being "fubar" - I don't see anything that's too out of line - the first form actually looks like it needs help more than the second. Please clarify for me and I'll be happy to help you out.
Posted 13 years ago on Tuesday January 18, 2011 | Permalink
laurabetterly
Member

Kevin,

sorry for the confusion on which was the 1st and which was the second. The one you recommended the code for .cms_postarea was actually the first one that just needed a change in font size and the code you recommended worked. i've printed the visual guide so I can adjust the titles, section.titles, etc. as needed. That is very helpful.

The fubar one is the one at http://esquirecorp2.yadayadasandbox.com/forms/form-information-to-complete-your-order/. That is the one in the Catalyst theme. I tried the code you had in the FAQ for Thesis to fix radio button and checkboxes but that didn't seem to work (I know it's for Thesis but thought I'd try just in case).

Could you take a look at the fubar one to see what might be causing the misalignment of the checkboxes and the lack of space between sections and fields?

Thanks.

Posted 13 years ago on Tuesday January 18, 2011 | Permalink
Kevin Flahaut
Administrator

Okay, thanks for the clarification. That makes a little more sense. I'll take a fresh look at it and get back to you with some suggestions.

Posted 13 years ago on Tuesday January 18, 2011 | Permalink

So, this Catalyst theme is setting 0 margins on list items and that's throwing off the form formatting. Try adding this to your custom css and it should override the theme styles.

/* correct the left margins on the checkbox and radio lists */

body .gform_wrapper .left_label ul.gfield_checkbox,
body .gform_wrapper .right_label ul.gfield_checkbox,
body .gform_wrapper .left_label ul.gfield_radio,
body .gform_wrapper .right_label ul.gfield_radio  {
    margin-left: 32%!important
}

/* correct the margins on the checkbox and radio items */

body .gform_wrapper .left_label ul.gfield_checkbox li,
body .gform_wrapper .right_label ul.gfield_checkbox li,
body .gform_wrapper .left_label ul.gfield_radio li,
body .gform_wrapper .right_label ul.gfield_radio li,
body .gform_wrapper .top_label ul.gfield_checkbox li,
body .gform_wrapper .top_label ul.gfield_radio li {
	margin:0 0 14px 0!important
}

/* correct the margins on the containing list items */

body .gform_wrapper .top_label ul li.gfield,
body .gform_wrapper .left_label ul li.gfield,
body .gform_wrapper .right_label ul li.gfield {
	margin:0 0 14px 0!important
}

/* correct the margins on the section breaks */

body .gform_wrapper li.gfield.gsection {
    margin: 8px 0 16px!important;
    padding: 0 0 8px!important
}

Posted 13 years ago on Tuesday January 18, 2011 | Permalink

laurabetterly
Member

Kevin,

Just tried it out. copied and pasted the code into custom.css and updated but form still has the same errors. Any other possibilities?

Thanks.

Posted 13 years ago on Wednesday January 19, 2011 | Permalink
Kevin Flahaut
Administrator

Hey Laura, I went back to the "fubar" form URL and got a 404 error. Can you post the updated URL for me and I'll take another look. Thanks.

Posted 13 years ago on Wednesday January 19, 2011 | Permalink
laurabetterly
Member

Guess if I'm going to change it I should put the new URL in any replies! Here it is:

http://esquirecorp2.yadayadasandbox.com/forms/post-order-form/

Posted 13 years ago on Wednesday January 19, 2011 | Permalink
laurabetterly
Member

Did you get notified of my reply above?

Posted 13 years ago on Friday January 21, 2011 | Permalink
Kevin Flahaut
Administrator

Laura, I did see your link but haven't had an opportunity to circle back around and investigate further. I'll do that and get back to you here asap.

Posted 13 years ago on Friday January 21, 2011 | Permalink
laurabetterly
Member

Kevin, Perfectly understandable. I appreciate your help.

Posted 13 years ago on Friday January 21, 2011 | Permalink

Kevin Flahaut
Administrator

I reviewed your form again and don't see the styles I gave you being included anywhere. What CSS file did you add these to?

I copied your form page and created a test page. I added the following styles to an inline style block (I appended one new rule to the previous example for the regular text fields) and then everything formatted nicely.

/* correct the left margins on the checkbox and radio lists */

body .gform_wrapper .left_label ul.gfield_checkbox,
body .gform_wrapper .right_label ul.gfield_checkbox,
body .gform_wrapper .left_label ul.gfield_radio,
body .gform_wrapper .right_label ul.gfield_radio  {
    margin-left: 32%!important
}

/* correct the margins on the checkbox and radio items */

body .gform_wrapper .left_label ul.gfield_checkbox li,
body .gform_wrapper .right_label ul.gfield_checkbox li,
body .gform_wrapper .left_label ul.gfield_radio li,
body .gform_wrapper .right_label ul.gfield_radio li,
body .gform_wrapper .top_label ul.gfield_checkbox li,
body .gform_wrapper .top_label ul.gfield_radio li {
	margin:0 0 14px 0!important
}

/* correct the margins on the containing list items */

body .gform_wrapper .top_label ul li.gfield,
body .gform_wrapper .left_label ul li.gfield,
body .gform_wrapper .right_label ul li.gfield {
	margin:0 0 14px 0!important
}

/* correct the margins on the section breaks */

body .gform_wrapper li.gfield.gsection {
    margin: 8px 0 16px!important;
    padding: 0 0 8px!important
}

/* correct the margins on the other text fields */

body .gform_wrapper ul.right_label li,
body .gform_wrapper form ul.right_label li,
body .gform_wrapper ul.left_label li,
body .gform_wrapper form ul.left_label li,
body .gform_wrapper ul.top_label li,
body .gform_wrapper form ul.top_label li {
    margin-bottom: 14px !important;
}

Live Test Page

screenshot

If you add these styles to a CSS file that gets loaded on the page properly, you should see the changes.

Posted 13 years ago on Saturday January 22, 2011 | Permalink

laurabetterly
Member

Kevin, Figured out what happened and got the code you recommended pasted into the Custom CSS and the form is formatted correctly now. Thought you should know. -Thank You.

Posted 13 years ago on Saturday January 22, 2011 | Permalink
Kevin Flahaut
Administrator

Wonderful. Thanks for the update Laura.

Posted 13 years ago on Saturday January 22, 2011 | Permalink

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