ASP.NET Display Property of the Validation Controls
Posted by Rick Tempestini on July 12, 2007
The display property for the ASP.NET validation controls have 3 settings: None, Static, and Dynamic. The results of setting the display property to None is self-explanatory. However, what is the difference between Static and Dynamic? The difference between the two can be seen when looking at the source in your browser after the page is loaded at run-time.
When the Display property is set to Dynamic, the CSS display attribute is set to none on the control. When the Display property is set to Static, the CSS visibility attribute is set to hidden and the display property is not used at all as shown in the browser output below:
Validation Control Display = Dynamic
<td style=”width: 491px; height: 16px”>
<span id=”RangeValidator1″
style=”display: inline-block; color: Red; width: 226px;
display: none;“>The age must be between 0 and 100 </span>
</td>
Validation Control Display = Static
<td style=”width: 491px; height: 16px”>
<span id=”Span1″
style=”display: inline-block; color: Red; width: 226px; visibility: hidden;“>
The age must be between 0 and 100 </span>
</td>
The default setting on the control for the Display property is Static. By setting this to Static the space for the error message is reserved. The advantages here is that the controls placed positionally to the right of the validation control will not be moved at run-time if the display message of the validation box appears.
CF said
Can you elaborate on the “CSS display attribute”? How does it work? I don’t see a .css file anywhere in the project
Rick Tempestini said
The span tag generated at runtime has an inline CSS style applied. This inline CSS style is represented by the style element shown below:
The inline CSS style specifies style information for the current element (the span tag in the example above) and can be used in place of a css file.
Refer to 14.2.2 for more information at the link below:
http://www.w3.org/TR/html4/present/styles.html#h-14.2