Category Archives: HTML

Rendering of HTML controls in ASP.NET Framework 4

Recently I noticed that ASP.NET Checkboxes were rendering slightly differently since moving to Framework 4.  With pervious frameworks the Checkbox and the text was grayed out when the control was disabled but in Framework 4 only the checkbox was grayed out.

Investigating this further we found that in previous frameworks, when the HTML is rendered a Span tag is created surrounding the individual controls e.g. checkbox and label in our case, and the Disabled attribute is set to ‘disabled’ which encompasses all child controls.

However with Framework 4 the Span did not have a Disabled attibute but rather a CSS class named aspNetDisabled was being applied instead e.g.

<span id=”id1″ class=”aspNetDisabled”>…</span>

With Framework 4 when a control is disabled a default CSS is now applied to the control called ‘aspNetDisabled’ which can render controls slightly different to previous versions of the framework.

However there are a number of ways to override this:

Solution 1

Like I mentioned earlier the aspNetDisabled property is only the default and so can be overridden with your own custom CSS class.

To do this Open the Global.asax file and define your new custom CSS class for the control in question within the Application_start function e.g.

Application_Start within the Global.asax file

Solution 2

aspNetDisabled is just a CSS class like any other and so we can extend it, although this could potentially effect all web controls rather than selected types like in the example above

Extending to aspNetDisabled to make associated control text Gray

Solution 3

In Framework 4 the WebControl.SupportsDisabledAttribute is being returned as False and the default aspNetDisabled class is being applied which as I found out renders disabled checkboxes slightly differently.  If the SupportsDisabledAttribute is True, ASP.NET will use the ‘Disabled’ attribute rather than the Class (aspNetDisabled)

According to Microsoft, if you upgraded your Web Project to ASP.NET 4 Visual Studio will set an Attibute called ‘controlRenderingCompatibilityVersion’ in the Web.Config to an earlier version of the framework.  This will override the rendering algorithms within .Net 4 with the ones from the version you specify.  I have not yet tried this approach but its worth taking into consideration

Hope this helps


Posted by on February 4, 2011 in ASP.NET, HTML