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.

bad, misbehaving radio buttons

  1. Please check out the second page of my form...
    https://paperblazer.com/submit/

    A few pixels of my radio buttons are cut off... decapitated, i tell you! :)

    Nothing else, just the buttons. please help.

    Posted 9 years ago on Thursday October 18, 2012 | Permalink
  2. What browser are you seeing this in? In Firefox 16 on Windows 7, the radio buttons look fine. Screenshot: http://minus.com/lxPJsrRmSbstV

    Looks the same to me in Chrome as well. Let us know what browser you're seeing the problem in so we can try to recreate it. There is likely something in your theme's stylesheet causing this. We will have to add a bit of CSS to make it work for you.

    Posted 9 years ago on Wednesday October 24, 2012 | Permalink
  3. It looks like your theme stylesheet is setting a 0 margin to all form inputs.. the radio inputs are inheriting this and in some browsers this is causing them to be cut off a little.

    https://paperblazer.com/wp-content/themes/mural/css/base.css - line 120

    Google Chrome - with rule active - http://bit.ly/RCeCjC
    Google Chrome - with margin definition removed - http://bit.ly/TfOqOx

    You may want to put some browser specific rules in your theme CSS file to adjust the margins. There are specific browser classes on your form wrapper that you can use to tweak for each browser. See the example below.. note the "gf_browser_gecko" class that would apply to Chrome or gecko-based browsers.

    [css]
    body .gf_browser_gecko .gform_body .gform_page ul.gform_fields li.gfield .ginput_container ul.gfield_radio li input {margin-left: 2px !important}
    Posted 9 years ago on Wednesday October 24, 2012 | Permalink