absolute positioning and overflow auto problem

[tripwater]

Hello, I just noticed this behavior recently as I primarily use FF to work out of but a few complaints has brought this to light. My issue is happening when dynamic content fills the current window in a div set to overflow:auto then you click on something near the browser's edge that will open a another control in a popup div over everything that is a higher z-index and absolute positioned. In FF when this happens and the control loads off screen, the overflow:auto kicks in and provides a scroll bar so you can get to the content. And I believe in FF, it will even kick off the main window scroll bar before it adds it to the div with overflow :auto.

In Safari and Chrome, I noticed this does not happen. It does not happen in the main browser window and it does not happen with a div set to overflow auto. What can we do to get these other browsers to act like FF and add a scroll when a z-indexed div set to absolute positioning is loaded beyond the window or div to bring up scroll?

Here is a screen shot of FF behavior


Here is the unwanted behavior in Chrome


The css for the div containing the popup control. We load more code inside this via ajax call that gives the box the color and fields ( you can't see as they are off screen )

.Scheduling_Popup {
    margin-top: 10px;
    position: absolute;
    z-index: 600;
}

At this point, just to keep things simple, let's forget the overflow:auto div and I ask what makes the browser's scroll bar for the main window react to the the popup div in FF but not the other browsers? Because this same behavior is happening in my example even without a div with overflow.

We use this technique quite a bit in this project, sometimes we have div with overflow, other times a faux lightbox effect that overlays on top of other controls to collect necessary info without cluttering up the form behind it and this behavior is happening across the board in Safari and Chrome when an absolute positioned div with a higher z-index is loaded at the edge of the window.

I thought about posting more code but really it is just as simple as putting content that fills the page and a div at the bottom of the window and loading info in a div with the above settings to get it to load off screen and there is no scroll added in these browsers. Any help with this would be wonderful so I have a better understanding of either what I am doing wrong or how to correct this going forward.

Thank you for your time.

[tempz]

Try

.Scheduling_Popup {
    margin-top: 10px;
    top:-50px;
    position: absolute;
    z-index: 600;
}

You have a position command, use top, right, left, bottom. To fix it!

[tripwater]

Originally Posted by tempz

Try

.Scheduling_Popup {
    margin-top: 10px;
    top:-50px;
    position: absolute;
    z-index: 600;
}

You have a position command, use top, right, left, bottom. To fix it!

Good idea but what happens now is 2 things, #1 instead of the popup loading next to the item you clicked on it now loads 50px higher which places it next to an icon they did not click on which will confuse the customer. #2 the popup div contains dynamic content and can have a couple of items on it or 20 or more. So we have no way of hard coding a top position that will guarantee the control will load in full view. We need a solution that makes the window or div adjust to the growing content since it is dynamic. Which I thought was the point to overflow:auto but it seems the z-index is placing it outside of the container so it does not acknowledge the need to adapt. I may be wrong but I am thinking this is the issue.

Thanks for the reply, I got a bit excited at the thought it could be that easy