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.

Form Goes Whack with Thesis 1.8 Full-width Framework Enabled

  1. Hello,

    The subject line says it all! Haha...

    I have two screenshots to share, both from a Gravity Form in Thesis 1.8:

    1.) With the default page framework enabled: http://reflectonthis.com/gravity-images/page-framework.jpg

    2.) With the full-width framework enabled: http://reflectonthis.com/gravity-images/full-width-framework.jpg

    I am mainly concerned about the "Purpose for Contact" section and the "Submit" button. The rest seems to be in order.

    I am trying to get the style of the page framework form (#1 above), while using the full-width framework feature.

    Respectfully,
    Chris M.

    Posted 8 years ago on Tuesday October 19, 2010 | Permalink
  2. Chris, This is a theme style issue. Thesis applies a blanket width to all form inputs.. I believe it's 40% width. Since buttons and radio fields are inputs, they get the nice 40% width rule too.

    The default Gravity Forms styles override this for Thesis, but that's specific to the default layout. You'll need to look at those styles and adjust the CSS specificity to match that of the new layout or just trying using the "width:auto!important" rule on the radio, checkbox and button fields to override it.

    Posted 8 years ago on Tuesday October 19, 2010 | Permalink
  3. So I would just target the radio, checkbox, and button fields in my custom.css for Thesis?

    I just looked at the Gravity Forms "forms.css" to figure things out, but I am a little overwhelmed by all the code.

    Could you tell me exactly which ID's/Classes I should target?

    Thank you.

    Posted 8 years ago on Tuesday October 19, 2010 | Permalink
  4. This should work for you.

    /* reset radio and checkbox input width */
    ul.gfield_radio li input,
    ul.gfield_checkbox li input {width:auto!important;}
    /* reset button width */
    .gform_footer input.button {width:auto !important;}
    Posted 8 years ago on Tuesday October 19, 2010 | Permalink
  5. Thank you very much Kevin. That did the trick!

    I am really happy with the support of Gravity Forms.

    Posted 8 years ago on Tuesday October 19, 2010 | Permalink
  6. Hmmm... Spoke too soon. :-)

    The reset of the radio and check boxes seems to be fine, but the SUBMIT button doesn't have the nice look that it has in image #1 (http://reflectonthis.com/gravity-images/page-framework.jpg ).

    Any idea why not?

    Posted 8 years ago on Wednesday October 20, 2010 | Permalink
  7. replace the previous CSS example with these rules. This block has all the Thesis button styles as well.

    /* reset radio and checkbox input width */
    ul.gfield_radio li input,
    ul.gfield_checkbox li input {width:auto!important;}
    /* reset button width */
    .gform_footer input.button {border-color:#CCC #999 #999 #CCC; border-right:3px double #999; border-style:double; border-width:3px; color:#111111; background-color:#E3E3E3; cursor:pointer; font-weight:bold; overflow:visible; width:auto !important; font-family: Georgia, "Times New Roman", Times, serif; font-size:1.143em; padding:0.313em 0.25em}
    Posted 8 years ago on Wednesday October 20, 2010 | Permalink