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.

Checkbox & Radio Button Display Problems

  1. blafarmm
    Member

    I have three separate domains -- and I run Gravity Forms and Thesis in each domain.

    More specifically, here are the release versions for each domain:

    Domain 1: GF Version 1.4.3.1 -- Thesis version 1.7
    Domain 2: GF Version 1.3.13.1 -- Thesis version 1.7
    Domain 3: GF Version 1.3.13.1 -- Thesis version 1.7

    Also, please note that all three Thesis 1.7 installations use the exact same custom.css file.

    Up until recently, I have been successfully embedding my GF forms into Thesis 1.7 without problems.
    However, something seems to have changed and my Checkboxes and Multiple Choice Radio Buttons are being displayed incorrectly.

    TROUBLESHOOTING
    ---------------------------
    I have imported the exact same GF form into all three installations.
    I have embedded that form in three WP Thesis 1.7 pages (one for each installation).
    I have published those pages and viewed them in Firefox, Internet Explorer and Chrome (with the cache cleared on all three).

    Here are the results:

    Domain 1:
    Firefox: Checkboxes and Multiple Choice Radio Buttons are displayed in the middle of the page, overlapping the Field Label
    Internet Explorer: Checkboxes and Multiple Choice Radio Buttons are displayed in the middle of the page, overlapping the Field Label
    Chrome: Checkboxes and Multiple Choice Radio Buttons are displayed in the middle of the page, overlapping the Field Label

    Domain 2:
    Firefox: Normal
    Internet Explorer: Checkboxes and Multiple Choice Radio Buttons are displayed above Field Label
    Chrome: Normal

    Domain 3:
    Firefox: Normal
    Internet Explorer: Checkboxes and Multiple Choice Radio Buttons are displayed above Field Label
    Chrome: Normal

    I greatly appreciate any insight regarding why this is happening.

    Thanks

    Posted 14 years ago on Wednesday October 6, 2010 | Permalink
  2. first domain - layout.css line 218 declares a 45% width for all inputs, which is being inherited by the checkbox/radio inputs. You can try to override with this or simply remove that blanket 45% rule from your layout.css file

    .gform_wrapper .gfield_checkbox li label, .gform_wrapper .gfield_radio li label {width: auto!important}

    screenshot with rule disabled

    for the other 2 domains, something is overriding the inline-block style for the checkbox/radio labels. You can try adding this to force that.

    .gform_wrapper .gfield_checkbox li label, .gform_wrapper .gfield_radio li label {display:inline-block\9!important; margin: 2px 0 0 6px\9!important }

    Posted 14 years ago on Saturday October 9, 2010 | Permalink