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.

Styling Ready Classes Adjusting Column/Input Widths

  1. mssbeen
    Member

    I am working on my first form. After a long day of trying solutions from the forum to create a form with three inputs in a row, I updated forms.css to 1.5 and have applied the css ready classes to my form. Now I have the city, state and zip in one row; however, I would like to adjust the sizes of the input areas. I have developed what I want in firebug, but when I applied the code to my style sheet there were no changes.

    '#gform_wrapper_2 #field_2_11 li .gfield .gf_left_third {width: 251px;}
    #gform_wrapper_2 #field_2_13 li .gfield .gf_left_third {width: 85px; margin-left: 3px;}'

    http://testblog.artizondigital.com/join-yei/become-a-yei-student/

    If I could figure out the code to use here I would be set to go.
    I appreciate any help anyone has to offer

    Posted 11 years ago on Tuesday November 30, 2010 | Permalink
  2. You specified the CSS inheritance incorrectly in your rules. There is no child list item inside the list items with the unique ID that you're targeting. This should work for you.

    #gform_wrapper_2 li#field_2_11 {width:251px}
    #gform_wrapper_2 li#field_2_13 {width:85px; margin-left:3px}

    test screenshot: http://grab.by/7EHd

    Posted 11 years ago on Tuesday November 30, 2010 | Permalink
  3. mssbeen
    Member

    Thank you very much that works perfectly and makes perfect sense.

    Posted 11 years ago on Tuesday November 30, 2010 | Permalink
  4. Wonderful, thanks for the update.

    Posted 11 years ago on Tuesday November 30, 2010 | Permalink
  5. No worries, its answered before I could write it up. Great response Kevin:0

    Posted 11 years ago on Tuesday November 30, 2010 | Permalink
  6. Robert, the inputs are set as a percentage of the container. It doesn't really matter if the input is a select, that's not really important here. We just needed to target and resize the containing list item.

    Thanks for the input. It's appreciated.

    Posted 11 years ago on Tuesday November 30, 2010 | Permalink
  7. I deleted my code when I saw yours done, thx.

    Posted 11 years ago on Tuesday November 30, 2010 | Permalink
  8. mssbeen
    Member

    This fixed the scroll bars appearing around the form in IE7 only.

    http://forum.gravityhelp.com/topic/layout-problems-in-gravity-forms-15-beta-34

    body .gform_wrapper ul.gform_fields {overflow:visible}

    Posted 11 years ago on Saturday December 4, 2010 | Permalink
  9. mssbeen
    Member

    Just so the developers know, the scroll bars appear in the preview in IE7. The post I mention above suggested:

    "The best way to determine if formatting issues are related to the default forms vs. your theme is to see if the form is properly formatted in the preview page. if so, it's inheriting some additional properties from your theme."

    This logic would point to the problem be independent of the theme styles. The problem is the check box section.

    Posted 11 years ago on Saturday December 4, 2010 | Permalink