Validator Controls Hidden but still taking up space

If you are using the built-in 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  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>

Published by

Tim Clark

Experienced Business Owner, Chief Information Officer, Vice President, Chief Software Architect, Application Architect, Project Manager, Software Developer, Senior Web Developer, Graphic Designer & 3D Modeler, University Instructor, University Program Chair, Academic Director. Specialties: Ruby, Ruby on Rails, JavaScript, JQuery, AJAX, Node.js, React.js, Angular.js, MySQL, PostgreSQL, MongoDB, SQL Server, Responsive Design, HTML5, XHTML, CSS3, C#,, Project Management, System Design/Architecture, Web Design, Web Development, Adobe CS6 (Photoshop, Illustrator)

3 thoughts on “ Validator Controls Hidden but still taking up space

  1. Thx! Great help!

    Works as descripted!

    Also if JavaScript is turned off and you used EnableClientScript=”true”.

    The server will validate after PostBack at server-side.


Leave a Reply

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

You are commenting using your 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