https://legacy.forums.gravityhelp.com/topic/css-for-advanced-fields-not-displaying-correctly-how-to-make-field-title-one Gravity Support Forums Topic: css for advanced fields not displaying correctly + how to make field title one en-US Mon, 20 Apr 2026 13:05:06 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/css-for-advanced-fields-not-displaying-correctly-how-to-make-field-title-one#post-143380 Wed, 06 Feb 2013 11:09:20 +0000 Chris Hajer 143380@https://legacy.forums.gravityhelp.com/ <p>Let us know if you need more help. </p> https://legacy.forums.gravityhelp.com/topic/css-for-advanced-fields-not-displaying-correctly-how-to-make-field-title-one#post-142822 Tue, 05 Feb 2013 20:53:05 +0000 rainbowfairy 142822@https://legacy.forums.gravityhelp.com/ <p>Thank you! You are a wizard. I will try this out. </p> https://legacy.forums.gravityhelp.com/topic/css-for-advanced-fields-not-displaying-correctly-how-to-make-field-title-one#post-142476 Tue, 05 Feb 2013 09:29:29 +0000 Chris Hajer 142476@https://legacy.forums.gravityhelp.com/ <p>You have three distinct issues here.</p> <p>For the label wrapping, your theme has set a width of 100px to all labels on line 315 of style.css:</p> <pre><code>[css] /* Line 315 */ form label { display: inline-block; width: 100px; margin-right: 10px; }</code></pre> <p>You can override that by adding this to your theme's stylesheet:</p> <pre><code>[css] body .gform_wrapper .top_label .gfield_label { width:100%; }</code></pre> <p>For the datepicker, you have a couple JavaScript error on the page which is preventing the Gravity Forms jQuery from running properly:</p> <pre><code>Timestamp: 2/5/2013 7:18:00 AM Error: TypeError: a is null Source File: <a href="http://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/19/main.js" rel="nofollow">http://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/19/main.js</a> Line: 29 Timestamp: 2/5/2013 7:18:04 AM Error: TypeError: Yf is null Source File: <a href="http://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/19/main.js" rel="nofollow">http://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/19/main.js</a> Line: 46</code></pre> <p>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 <a href="http://rkt.gs/testing" rel="nofollow">http://rkt.gs/testing</a> </p> <p>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: <a href="http://minus.com/lpWhi8N1naKaN" rel="nofollow">http://minus.com/lpWhi8N1naKaN</a></p> <pre><code>[css] body .gform_wrapper input[type=&quot;text&quot;], body .gform_wrapper input[type=&quot;url&quot;], body .gform_wrapper input[type=&quot;email&quot;], body .gform_wrapper input[type=&quot;tel&quot;], body .gform_wrapper input[type=&quot;number&quot;], body .gform_wrapper input[type=&quot;password&quot;]{ padding: 0px!important; }</code></pre> https://legacy.forums.gravityhelp.com/topic/css-for-advanced-fields-not-displaying-correctly-how-to-make-field-title-one#post-142093 Tue, 05 Feb 2013 01:17:34 +0000 rainbowfairy 142093@https://legacy.forums.gravityhelp.com/ <p>Hi,<br /> 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.<br /> 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.</p> <p><a href="http://ylv.com.au/enrollment-form-2/" rel="nofollow">http://ylv.com.au/enrollment-form-2/</a></p> <p>password is gravityforms<br /> Thank you<br /> Sarah </p>