Styling Validation Error Messages « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Phormosa
Member
I'm having a hard time styling the validation error messages - I've adjusted the positioning for the various inputs/fields for the form, and it looks great when there's no errors. But when there are, the whole thing just looks totally wrong with various fields just going completely out of alignment when the errors pop up. Here's some css targeting that I've done that hasn't worked (gravity-last-name is a custom class and the positioning values are exaggerated for testing purposes):
```
.gravity-last-name .validation_error {
	position:relative;
	padding: 0px;
	margin: 0px;
	width: 140px;
	top: -300px !important;

} */
/*#field_2_10 .gfield_error {
	position:relative;
	padding: 0px;
	margin: 0px;
	width: 140px;
	left: -300px !important;
	top: -500px !important;

} 

.gfield_error .validation_message .gravity-last-name {
	position: relative;
	top: 100px;
```
Posted 11 years ago on Thursday May 2, 2013 | Permalink
Kevin Flahaut
Administrator

Can you post a URL to your form so we can check it out. It's a lot easier to offer some help if we can see the actual form. Thanks.

Posted 11 years ago on Thursday May 2, 2013 | Permalink
Phormosa
Member

Kevin,

Thanks for the help. You can find the form at http://justrank.it/

The form is at the very bottom. Just hit submit without filling anything out and you'll understand what's going on. Thanks!

Posted 11 years ago on Thursday May 2, 2013 | Permalink
Kevin Flahaut
Administrator

Hey, sorry, I did see this post but haven't had a chance to go back and research it thoroughly to give you some pointers. I'll do that asap but wanted to let you know I hadn't forgotten you. Thanks for your patience.

Posted 11 years ago on Saturday May 4, 2013 | Permalink
Kevin Flahaut
Administrator

Okay, the first thing I see is that the ready classes aren't being implemented correctly and I would bet that's causing most of your layout woes. The "left_half" and "right_half" classes are supposed to work together left+right and so on. You have left, right, left, left, left, left. I see what you're trying to do, but those classes are designed to create simple two column layouts where the fields are the same size.

http://i.imgur.com/qWKPFdO.jpg

What I would do is use the HTML blocks to add inline div "wrapper" elements and actually create 2 div "columns" to align your fields the way you want. It's going to be a tad more work building the form and CSS, but it's going to be more forgiving and bulletproof from a layout standpoint.

Here's an example of what I'm talking about.

http://www.gravityhelp.com/forums/topic/how-can-i-get-the-form-fieldsboxes-side-by-side#post-29425

Once you get the layout sorted properly I think the validation styling shouldn't be a problem.. if anything, just may need some minor tweaking.

Posted 11 years ago on Sunday May 5, 2013 | Permalink