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.

css for advanced fields not displaying correctly + how to make field title one

  1. Hi,
    I hope you can help me, the advanced fields on this website are displaying incorrectly, the ends are cut off in the address field and the date on the calendar is not displaying, just the dates and these are superimposed. They are clearly interacting with the css from the theme but I wouldn't know where to start to correct them. I tied the solution that you offered in code to another user but it didn't fix the problem.
    Also I was wondering how to get it to display the titles for each field in one line, I'm not sure why its separating them into two lines.

    http://ylv.com.au/enrollment-form-2/

    password is gravityforms
    Thank you
    Sarah

    Posted 8 years ago on Tuesday February 5, 2013 | Permalink
  2. You have three distinct issues here.

    For the label wrapping, your theme has set a width of 100px to all labels on line 315 of style.css:

    [css]
    /* Line 315 */
    form label
    {
      display: inline-block;
      width: 100px;
      margin-right: 10px;
    }

    You can override that by adding this to your theme's stylesheet:

    [css]
    body .gform_wrapper .top_label .gfield_label {
        width:100%;
    }

    For the datepicker, you have a couple JavaScript error on the page which is preventing the Gravity Forms jQuery from running properly:

    Timestamp: 2/5/2013 7:18:00 AM
    Error: TypeError: a is null
    Source File: http://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/19/main.js
    Line: 29
    
    Timestamp: 2/5/2013 7:18:04 AM
    Error: TypeError: Yf is null
    Source File: http://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/19/main.js
    Line: 46

    It looks like you're loading a couple versions of the jQuery UI and datepicker on the page. Please use these troubleshooting steps to see if this is due to a plugin (AJAX Event Calendar?) or theme conflict http://rkt.gs/testing

    For the advanced fields, your theme is adding padding and margin to all form inputs (see your theme's stylesheet at lines 134 and 316). You can override this as well, but the fields got really small at that point. You might have to do more with your original form stylesheet as just overriding the padding might not be what you need. I added this to your theme's stylesheet and got the result shown here: http://minus.com/lpWhi8N1naKaN

    [css]
    body .gform_wrapper input[type="text"], body .gform_wrapper input[type="url"],
    body .gform_wrapper input[type="email"], body .gform_wrapper input[type="tel"],
    body .gform_wrapper input[type="number"], body .gform_wrapper input[type="password"]{
      padding: 0px!important;
    }
    Posted 8 years ago on Tuesday February 5, 2013 | Permalink
  3. Thank you! You are a wizard. I will try this out.

    Posted 8 years ago on Wednesday February 6, 2013 | Permalink
  4. Let us know if you need more help.

    Posted 8 years ago on Wednesday February 6, 2013 | Permalink