Radio / Checkbox select is under text value

Gravity Support Forums » Plugin Support » Gravity Forms

waysidepublishing
Member

I have three fields that have either a checkbox or radio button. On one of the fields the checkbox is positioned correctly. On the other two they are positioned under the text value of the field. I'm not sure why there is not a consistent behavior. Obviously, I would like the text value to be to the right of the box. What should I do to correct the positioning and how will I do this so I get consistent behavior?
Shipping Notice (correct positioning) - Checkbox
http://waysidepublishing.com/wp-content/uploads/2013/01/GF-ShippingNoticeForm.jpg
http://waysidepublishing.com/wp-content/uploads/2013/01/GF-ShippingNoticeField.jpg

Shipping Address (incorrect positioning) - Checkbox
http://waysidepublishing.com/wp-content/uploads/2013/01/GF-ShippingAddressForm.jpg
http://waysidepublishing.com/wp-content/uploads/2013/01/GF-ShippingAddressField.jpg

Order Processing (incorrect positioning) - Radio button
http://waysidepublishing.com/wp-content/uploads/2013/01/GF-OrderProcessingForm.jpg
http://waysidepublishing.com/wp-content/uploads/2013/01/GF-OrderProcessingField.jpg

Thanks,
Greg

Posted 11 years ago on Friday January 25, 2013 | Permalink
Chris Hajer
Key Master

We'll need a URL to the page on your site where we can see the form live to help you with this. The screenshots show the problem, but we can't inspect you theme's CSS to determine where the problem is coming from. It's likely a blanket margin or padding issue in your theme's style.css.

Posted 11 years ago on Wednesday January 30, 2013 | Permalink
waysidepublishing
Member

Here's a link to the form: http://devsite.waysidepublishing.com/contact-us/purchase-order-form/

Posted 11 years ago on Wednesday January 30, 2013 | Permalink
Chris Hajer
Key Master
This is something your theme is doing. The theme is adding a class of "rokchecks" and "rokradio" to all the inputs. That is probably being done with JavaScript. The effect of that is that there is a background image sprite being applied to the radio buttons and checkboxes, and the padding is being applied from your theme's css/template.css file:
```
[css]
/* Line 139 */
.rokradios, .rokchecks
{
  padding-top: 1px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 16px;
  line-height: 120%;
  cursor: pointer;
}

/* Line 142 */
.rokchecks
{
  background-position: 0px -426px;
  background-repeat: no-repeat;
}
```
Please contact RocketTheme for support on how best to change this in your installation.
Posted 11 years ago on Wednesday January 30, 2013 | Permalink