https://legacy.forums.gravityhelp.com/topic/text-positioning-in-validation-error-div Gravity Support Forums Topic: Text positioning in validation error div en-US Mon, 20 Apr 2026 06:33:40 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/text-positioning-in-validation-error-div#post-56515 Wed, 25 Apr 2012 10:53:42 +0000 David Peralty 56515@https://legacy.forums.gravityhelp.com/ <p>Glad to hear it. :) </p> https://legacy.forums.gravityhelp.com/topic/text-positioning-in-validation-error-div#post-56514 Wed, 25 Apr 2012 10:52:32 +0000 Robsticles 56514@https://legacy.forums.gravityhelp.com/ <p>Ok I got it working now. Thanks! </p> https://legacy.forums.gravityhelp.com/topic/text-positioning-in-validation-error-div#post-56508 Wed, 25 Apr 2012 10:44:38 +0000 David Peralty 56508@https://legacy.forums.gravityhelp.com/ <p>Kevin's example is exactly what you are looking for as it requires no extra markup to make happen. </p> https://legacy.forums.gravityhelp.com/topic/text-positioning-in-validation-error-div#post-56506 Wed, 25 Apr 2012 10:40:58 +0000 Robsticles 56506@https://legacy.forums.gravityhelp.com/ <p>Hi David,</p> <p>Thanks for getting back to me. I understand that validation errors have classes assigned to them, but if you have a look at the HTML below you'll see what I mean. I need to position the text in the div. Without &lt;p&gt; or &lt;span&gt; tags I can only target the div not the text inside it.</p> <p><code>&lt;div class=&#39;gfield_description validation_message&#39;&gt;This field is required.&lt;/div&gt;</code></p> <p>I've been experimenting and I've added some HTML to the "validation message" box under the advanced tab of the form fields like this:</p> <p><code>&lt;span class=&quot;error_icon&quot;&gt;&lt;/span&gt;&lt;p&gt;This field is required.&lt;/p&gt;</code></p> <p>Now I can position the text and icon but I have to add it to every form field. Is there any other way I can do it? </p> https://legacy.forums.gravityhelp.com/topic/text-positioning-in-validation-error-div#post-56499 Wed, 25 Apr 2012 10:18:28 +0000 Kevin Flahaut 56499@https://legacy.forums.gravityhelp.com/ <p>You don't need any additional markup to target/style the validation message. You can easily do so with inheritance from the containing div. For example..</p> <pre><code>[css] body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message { padding-left: 20px !important; background-image: url(&quot;http://games-ak.espn.go.com/s/minigames/i/trivia/alert_icon.png&quot;); background-repeat: no-repeat; background-position: 0 9px }</code></pre> <p>test screenshot: <a href="http://bit.ly/IcyIyH" rel="nofollow">http://bit.ly/IcyIyH</a></p> <p>You can find out more about how to properly target the form elements for styling (with samples) in the documentation here.</p> <p><a href="http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples</a> </p> https://legacy.forums.gravityhelp.com/topic/text-positioning-in-validation-error-div#post-56486 Wed, 25 Apr 2012 08:57:43 +0000 David Peralty 56486@https://legacy.forums.gravityhelp.com/ <p>All validation errors have classes assigned to them that you can hook into via CSS.<br /> One should be .validation_error and the other should be .validation_message. </p> https://legacy.forums.gravityhelp.com/topic/text-positioning-in-validation-error-div#post-56483 Wed, 25 Apr 2012 07:25:12 +0000 Robsticles 56483@https://legacy.forums.gravityhelp.com/ <p>I've noticed that the validation error text is wrapped in div tags but nothing else. Is it possible to wrap the text in &lt;p&gt; or &lt;span&gt; tags so I can position the text? I'm trying to add a small warning icon on the left side of the text.</p> <p>Thanks </p>