Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts

    absolute positioning and overflow auto problem

    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 )
    Code:
    .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.

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Try

    Code:
    .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!

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tempz View Post
    Try

    Code:
    .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
    Last edited by tripwater; 07-26-2012 at 04:40 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •