In the past few days I have learned that with Atlas, it makes a difference if you put your CSS style information in a class in an external CSS document or code it inline in the HTML element.

I had been using an Atlas UpdatePanel wrapper around a TreeView server control all inside a DIV tag. The DIV tag was using a CSS class to set the width, height and overflow styles. Durring testing, I noticed that when the tree expanded and the scroll bars apeared, every click of a node in the tree made scrolled the content back to the top of the tree. I had done a similar Atlas/TreeView in another page and it worked just fine. After some further debugging and code comparison line by line, the difference was that in my working example the CSS information was “in-line” with the DIV tag, but my recent code put the CSS style in an external class. So I moved the style from the class to “in-line” and it began to work just fine.

I am not sure if this is another IE bug, CSS bug or an Atlas bug. Either way, quite interesting and thought I would share it.

Also see my post in this thread:
http://forums.asp.net/2/1268514/ShowThread.aspx



Update
:

TreePopUpOverlay

It appears that the CSS can be inline or in external CSS file, it makes no difference, but the real issue was if the class with overflow=auto is inside or outside the Atlas UpdatePannel. IF you have a DIV with a CSS style setting overflow=auto inside the UpdatePannel, every click within that div will set the scroll to the top. IF you have put that DIV right outside the UpdatePannel, then it should work fine.This also goes for any parent/nested UpdatePanels. So, if the UpdatePannel I just refrenced in the last paragraph were nested inside another UpdatePanel, or I at a later date put that UpdatePannel inside another UpdatePanel, it would “break” the proper scrolling function.

So to produce the popup dialog on the right, and have the red X and the [Close] button work in an UpdatePannel, instead of wrapping everything inside another UpdatePannel, I would have to have one UpdatePannel for the red X close button and one UpdatePannel for the [Close] button at the bottom. See code image below.

treepopupoverlay.txt

Advertisements