.NET (306) administrative (42) Ajax (42) AngularJS (2) ASP.NET (146) bicycle (2) books (213) browser (10) C# (139) cars (1) chess (30) CodePlex (11) Coma (8) database (63) deployment (3) Entity Framework (2) essay (120) flash/shockwave (2) flex (1) food (3) friend (2) game (22) idea (5) IIS (8) javascript (86) LInQ (2) Linux (6) management (4) manga (47) misc (736) mobile (1) movies (105) MsAccess (1) murder (2) music (64) mysql (1) news (101) NuGet (1) permanent (1) personal (69) PHP (1) physics (2) picture (356) places (12) politics (15) programming (536) question (2) rant (124) religion (3) science (44) Sharepoint (3) software (60) space (2) T4 (2) technology (13) Test Driven Development (4) translation (2) VB (2) video (106) Visual Studio (45) web design (47) Windows API (8) Windows Forms (3) Windows Server (6) WPF/Silverlight (64) XML (12)

Tuesday, January 08, 2008

CSS issues with AjaxToolKit controls like TabContainer

Update: this problem appeared for older versions of AjaxControlToolKit. Here is a link that says they fixed this issue since 21st of September 2007.

You are building this cool page using a TabContainer or some other AjaxControlToolKit control and everything looks smashing and you decide to add the UpdatePanels so that everything would run super-duper-fast. And suddenly the beautiful page looks like crap! Everything works, but your controls don't seem to load the cascading style sheet.
What is happening is that you make a control visible using update panels and so the CSS doesn't get loaded. I don't know exactly why, you would have to look into the AjaxControlToolKit source code and find out for yourself.

I found two fixes for this. The first is the nobrainer: add another TabContainer or AjaxControlToolKit control in the page, outside any updatepanels, make it visible, but set its style.display to 'none' or put it in a div or span with style="display:none". The second is the AjaxControlToolKit way. In the Page_Load event of the page or user control that contains the TabContainer or AjaxControlToolKit control add this line:
ScriptObjectBuilder.RegisterCssReferences(AjaxControlToolKit control);

This is part of the ExtenderControlBase class in AjaxControlToolKit, which is inherited by most if not all of their controls.

Now it should all work wonderfully.

1 comment:

StuartD said...

Excellent posting - exactly the problem I was trying to solve - many thanks.