ASP.net: Validator Controls Hidden but still taking up space

If you are using the built-in ASP.net Validation Controls such as the RequiredFieldValidator or the RegularExpressionValidator to validate user input, as you should be, you may have notices that in your UI even though they are not active (hidden) they are still taking up space in your layout and may be throwing things off.
It turns out that the Validation Controls in ASP.net  have an attribute you can add to their markup called ‘Display’. By default if you do not add and set this attribute in your control’s markup it will default to ‘Static’. There are 2 other options available to you ‘None’ and ‘Dynamic’. It is due to the ‘Static’ option that you are seeing it take up space even when it is not active.
To fix the problem set the ‘Display’ attribute in the control’s markup to the ‘Dynamic’ value and poof, the space is no longer taken up when inactive and is dynamically added when active.
Here is what each option actually does to the Validator’s HTML markup when set.
Static (Default): Causes the required space for the error message to be taken up in the UI’s HTML no matter if it is inactive or active.

<span style="color: Red; visibility: hidden;">Invalid</span>

Dynamic: Causing the element to not display at all, but when activated the space needed to display the error is reclaimed and UI elements are shifted to make room.

<span style="color: Red; display: none;">Invalid</span>

None: Causing the element to not display at all even when activated, the error message still displays in a Validation Summary if provided but nothing will appear in the UI where the Validator was originally positioned.

<span style="color: Red; display: none;"></span>

3 thoughts on “ASP.net: Validator Controls Hidden but still taking up space

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s