Question regarding Visible = false and display: none;
If I set some kind of control property Visible = "false" then I cannot see the control in the HTML generated by my aspx page. But when I use display: none on the style tag for this control, I see the control as greyed out in HTML. Why is this?
Also, if I find some control that is no longer needed on the page: -
- Should I comment on this from my page?
- Should I set its property Visible = false "
- Should I set the display to: none?
What would be the best approach given the time constraints and page weight?
Below is the HTML that was generated by my test page: -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
</head>
<body>
<form id="form1" action="testvisibility.aspx" method="post" name="form1">
<div>
<input id="__VIEWSTATE" type="hidden" value="/wEPDwUKMTY2NDk3NDQzNQ9kFgICAw9kFgQCBw8PFgIeB1Zpc2libGVoZGQCCQ8WAh4Fc3R5bGUFDWRpc3BsYXk6bm9uZTtkZEjYzMWMovvrGmuSrQHwc5ZXgqXCrf+lekz1GgsdjUd+" name="__VIEWSTATE">
</div>
<div>
visiblelabel::
<span id="visiblelabel">visiblelabel</span>
<br>
labelwithvisiblefalseonaspx::
<br>
labelwithdisplaynoneonaspx::
<div style="display: none;">
<span id="labelwithdisplaynoneonaspx">labelwithdisplaynoneonaspx</span>
</div>
<br>
labelwithvisiblefalseonserverside::
<br>
labelwithdisplaynoneonserverside::
<div id="divforlabelwithdisplaynoneonserverside" style="display: none;">
<span id="labelwithdisplaynoneonserverside">labelwithdisplaynoneonserverside</span>
</div>
<br>
</div>
</form>
</body>
</html>
source to share
If you want to dynamically show or hide the control via Ajax / etc, or if the control contains the information your page needs, set display:none
in CSS.
If you don't want to render the control at all in certain situations, install Visible="false"
. Since it keeps the HTML control outside of the page, it renders somewhat smaller pages, but if you want to expose the control via Ajax / etc, that won't work.
If you don't want to render the control at all, period, do not comment on it - remove it completely. All controls, visible or not, still require processing, so Visible = false wastes CPU (and possibly causes side effects) if you never intend to render the control. And you really don't want a lot of commented things floating around; it just makes maintenance easier. You can always bring it back from your version control if you find you need it later. (You are using SVN / Git / CVS / whatever, right?)
source to share
The property Visible
is a property of the control - if set to false, the control is not displayed at all. This is much better than setting display:none
, in which case the control is rendered with style display:none
so the browser does not render it.
display:none
might be useful if you don't want the control to be visible, but it contains some data that you want to use on the client (via Javascript, say). In this case, setting the property Visible
to false will not work.
source to share
I can't say which one is better, it depends on the situation. If you want to use this control in a client site (i.e. want to access the control using JavaScript), you need to set the display to none. But if you don't need it on the client side, it is better to set the visibility to false.
source to share