Radio buttons and chekboxes cut off « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

FireSamurai
Member
The radio buttons and checkboxes get cut off on my gravity forms. I've narrowed it down to this:
```
.gform_wrapper ul.gfield_checkbox li, .gform_wrapper ul.gfield_radio li {
  	padding: 0 !important;
	}
```
Because there is no padding on it, the container cuts off the edges of the radio buttons and checkboxes on the top and the left.

I could do something like this to fix it
```
.gform_wrapper ul.gfield_checkbox li, .gform_wrapper ul.gfield_radio li {
  	padding:1px 0 0 1px !important;
	}
```
But because the original style in the gf plugin has !important by it, my style cannot override it.

Any ideas on how to fix the issue? Thanks.

FS
Posted 14 years ago on Tuesday May 17, 2011 | Permalink
Kevin Flahaut
Administrator

Can you share a URL to your form? It's easier to help out if I can see it.

Posted 14 years ago on Tuesday May 17, 2011 | Permalink
Carl Hancock
Administrator

By default this isn't going to cut off your radio buttons and checkboxes so it's probably more than just this, it probably involves CSS being inherited by your theme. If you post a link to a page on your site with a form on it that is having this issue we can look at the CSS and suggest some changes.

Any changes you would make by editing or adding CSS to your themes stylesheet and not by editing Gravity Forms plugin files or CSS files.

Posted 14 years ago on Tuesday May 17, 2011 | Permalink
FireSamurai
Member

Shoot, sorry guys, I forgot to add the URL.

Here you go:

http://xennsoft.chrismower.com/contact/

I would like to add that it's seen in webkit browsers... I'm not seeing it in FF.

Thanks,

FS

Posted 14 years ago on Tuesday May 17, 2011 | Permalink
Kevin Flahaut
Administrator
Without seeing your form, I can't say for sure but this should work to override the !important declaration. Better CSS specificity will override !important
```
[css]
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox li,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio li {padding:1px 0 0 1px}
```
More samples in the documentation here:
http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples
Posted 14 years ago on Tuesday May 17, 2011 | Permalink
Kevin Flahaut
Administrator

looks like your issue is actually related to some TwentyTen theme-specific styles that are in the forms.css file. (specifically line 294) I'm guessing your theme was built on top of that originally.
If you disable that rule, you'll see that the formatting is corrected.

screenshot: http://grab.by/a9C4

Those styles are going bye-bye in the upcoming 1.5.3 release so if you want, you can go ahead and copy the contents of the updated file into your existing forms.css file.

CSS: http://pastie.org/1918207

Once the update is rolled out later this week, you shouldn't have to manually change anything.

Posted 14 years ago on Tuesday May 17, 2011 | Permalink
FireSamurai
Member

The greater specificity did the trick. Thanks!

Posted 14 years ago on Tuesday May 17, 2011 | Permalink
FireSamurai
Member

BTW, I have to say that the help files/documentation that you guys have created is some of the best I've seen. Excellent job, thank you.

Posted 14 years ago on Tuesday May 17, 2011 | Permalink
Kevin Flahaut
Administrator

Glad that worked for you and thanks for the kudos. I'll pass that along to Alex & David since the documentation was really all their doing. I'm sure they'll appreciate it.

Posted 14 years ago on Tuesday May 17, 2011 | Permalink

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