Is It Possible To Have A Popup Div That 'breaks Out' Of An Overflow:scroll Or Overflow:auto Container?

I have a scrollable area that contains popup menus. Conceptually, something like this:

... content here that's big en

Solution 1:

I'd say that it's not possible to do that without using JS to calculate the position of the link and then display the popup with a position:fixed..

The problem is that your popup is inside a div with overflow:auto and everything inside that div will affect the scroll, so to show the popup you'll need to take it outside that div, and the only way i know to do that is by using the position:fixed... (or maybe using position:absolute on the popup, and a wrapper div with position:relative that contains the text and the popups)

so i'll propose 3 solutions:

1. put the popup outside the div with scroll, and when the user clicks on the link, display the popup
2. calculate the exact position of the link (x,y) and display the popup using position:fixed and the coordinates
3. use a nice and always-easy-to-use "message box" (e.g. http://csscody.com/demo/wp-content/demo/popup/demo.htm) I know that this is not exactly what you wanted, but.. i ran out of ideas =D

I hope this helps

Solution 2:

Displaying a popup inside a of a div with "overflow: auto", "overflow: scroll" or "overflow: hidden" will always generate this kind of issues. By rule, an element child can't be displayed beyond the parent's borders in all these cases because the overflow property makes precisely that. Using "position: fixed" to the popup will solve your issue BUT if you scroll down you'll see how the popup is displayed in the old position, previous to the scroll event. To solve this you can use JQuery, as follows:

$(".your-popup-PARENT-class").live( {
    mouseenter: function(event) {
        event.stopPropagation();
        var position = $(this).offset();
        $(this).find(".your-popup-class").css("top", (position.top + 30) );
        $(this).find(".your-popup-class").css("left", position.left);
        $(this).find(".your-popup-class").css("display", "inherit");
    },
    mouseleave: function(event) {
        event.stopPropagation();
        $(this).find(".your-popup-class").css("display", "none");
    }
});

This code segment finds your popup parent element on the DOM tree, saves the current position and display the popup in the same position of the parent. As you can see, you can add or remove needed pixels, (bold code in previous CSS top definition).

Hopefully, this will be hepful for someone else with this kind of issue.

Kind regards!

Solution 3:

I'm not sure what the effect you're going for is, but if you remove the popup's container, then the popup will show up outside of the scrollable div.

<div style="overflow:auto; width:100px; height:100px">
  ... content here that's big enough to trigger scrollbars...
    <div id="popup"
         style="display:none; position:absolute; width:150px; height:150px">
      ... more content. This div gets shown and hidden by jquery on click events.
    </div>
</div>

Solution 4:

I don't have an answer to this but if you ever found a good answer I'd love to hear about it. I have a very similar issue (I've a list of options for the user to select to modify the item in the scrolling section. It doesn't look so good if I'm near the bottom of the list.

Share