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.

Radio / Checkbox select is under text value

  1. 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 6 years ago on Friday January 25, 2013 | Permalink
  2. 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 6 years ago on Wednesday January 30, 2013 | Permalink
  3. Here's a link to the form: http://devsite.waysidepublishing.com/contact-us/purchase-order-form/

    Posted 6 years ago on Wednesday January 30, 2013 | Permalink
  4. 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 6 years ago on Wednesday January 30, 2013 | Permalink