ASP.NET control with CSS visibility:hidden, not being shown on Control.Visible = true

Question

I have a few labels on my page with a class of 'error', the rule for .error is:

.error {
    color:Red;
    visibility:hidden    
}

The markup for the labels is:

<asp:Label ID="lblError" runat="server" CssClass="error" ></asp:Label>

I then set the .Text property of the error label in my code behind.
If I use lblError.Visible = True when I set the text, the label isn't shown. Any ideas why that would be? I'm maybe wrong here but I thought that setting .Visible was like setting the visibility style?

Answer 1

The Visible property affects rendering of the entire element and is unrelated to the CSS visibility attribute. When false, Visible when prevent any HTML from being rendered at all.

To change the css attribute, you will need to do it manually. You can do this by either removing the "error" class from the element (via the CssClass property) or by setting a style="visibility: visible" attribute manually via the Attributes property (since the style attribute overrides a css class):

control.Attributes["style"] = "visibility: visible";

Answer 2

You are getting confused between CSS visibility and the control's server side Visible property. To understand it better I recommend you create a sample page with a label, toggle the Visible property between true and false and view the generated HTML.

What you will find is as follows. As true:

<div>
   <label runat="server" visible="true">Hello</label>
</div>

Will render:

<div>
    <label>Hello</label>
</div>

When set to false, it will render:

<div>

</div>