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

Question

Hi,

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 of the error in my code behind. If I use lblError.Visible = True; when I set my 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

Have a look at this page, it should clarify things: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.style.aspx

As written before:

The Visible property is serverside and determines if the Server will render the control or not (if it's not rendered, no HTML will be created for it, and it's not in the final HTML send to the client).

The Style property controls the style attribute of the element. The element will be rendered but you can control the visibility (CSS).

Answer 3

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>