Question

I’ve got a webpage built using MVC3 and .NET 4
Validation is working great in that my Client and Server side logic work as required.
The field background colour is the standard MVC3 “red” if a field has not been entered when set to “required”, however, the field “shrinks” by a few pixels in width, which means that right hand side of the field does not line up with a field which is not required (and has the same css class assigned).

For example:

Before Validation:
1st field is required and has a class = “names” – width: 200px
2nd field is not required and has a class = “names” – width: 200px

After Validation:
1st field is required and has 2 classes = “names” & “input-validation-error”- width: < 200px ~ 198px
2nd field is not required and has 2 classes = “names” & “valid” – width: 200px

Any help would be appreciated.

Answer 1

That’s because the normal field uses a bezeled border, which is 2 pixels wide. The error field is only 1 pixel wide. You can change the CSS to adjust the size of either the border, or the width of the field.