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.


StuartD said...

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