Why not to mix YUI Panels with ASP.NET Panels

Many an unsettling hour I have spent on this issue, so here it is for the spiders to archive for future reference; You should not use ASP.NET Panel objects within a Yahoo User Interface (YUI) Panel container. I have not determined the exact cause, but the problems were real stumpers.

The problem can best be described like this: In Internet Explorer 6, some of the buttons and links that the user sees are not clickable. When you use a tool like Chris Pederick’s Firefox Developer Toolbar which can outline block level objects, you would see that the YUI panels that are not presently visible, and have ASP.NET panels in them, are overlapping the unclickable objects, almost as if there is a conflict with z-indexes.

For those who have never used .NET panels, they are like the HTML Fieldset object where you can wrap groups of server controls (like textboxes/drop-down lists/etc..) and control them programmatically. I was using them to show/hide different information in a YUI panel. But it seems that the ASP.NET panel does not totally respect the z-index of the parent YUI panel when they are rendered.
A bizarre issue that was solved with a little server-generated javascript sent with the page to the client.

Leave a Reply