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 button CSS styling

  1. jochan

    I have been using gravity forms for a few months now..
    in the previous versions, I defined a css class so that the radio button choices are display inline (instead of vertically).

    but after upgrade today, i realised that not only the choices do not display inline anymore (in all IE, chrome and firefox), all the radio buttons becomes unclickable (only in firefox)

    link to form:

    i'm not sure why this happened, maybe the source code of the form has changed causing the css class to no longer work, thus displaying vertically... but then why would it be unclickable?

    Could you let me know what can I do to have the radio button choices display inline?


    Posted 13 years ago on Saturday October 23, 2010 | Permalink
  2. There haven't been any markup changes that would affect your form. There were a few CSS updates to the radio/checkbox fields back in version 1.3.12 I believe.

    The "display:inline" rule on you theme's style.css file (line 1653) is causing the issue.

    I would remove that and try this..

    Go to each field in the admin and change the custom class name in the "CSS class name" option under the advanced tab.

    You'll want to change your "gravity_radio" class name to "gf_2col", "gf_3col" or "gf_4col" which create either 2,3 or 4 column layouts for the radio/checkbox fields. The supporting CSS is already part of the default file so you shouldn't have to do anything to get those to work.

    test screenshot with new classes ("gf_4col") applied

    Posted 13 years ago on Saturday October 23, 2010 | Permalink

This topic has been resolved and has been closed to new replies.