popup DIV cut off by container DIV

Question

I've got a button that show a popup window when hovered over. This button is inside a div and the popup div is being cut off by one of its containing divs.

Hover over the "Save To List" button and you will see.

http://dev.iqcatalogs.com/avcat/ctl1642/index.cfm?manufacturer=tandberg&product=cisco-tracker-remote-control

score 11 · Answer 1 · answered May 31 '12 at 22:28

It's because your surrounding div is set to overflow:auto.

Try to change it to overflow:visible

div#productMainWrapper div#pmwRightContainer1 {
    color: #000000;
    float: right;
    height: 215px;
    overflow: visible; //changed
    padding: 8px 13px 0 0;
    width: 295px;
}

score 5 · Answer 2 · answered May 31 '12 at 22:26

5

The problem is the div#productMainWrapper div#pmwRightContainer1 is not allowing the overflowing child elements to display fully.

Change the overflow to visible.

    div#productMainWrapper div#pmwRightContainer1 {

    overflow: visible;

}

answered May 31 '12 at 22:26

Timbadu

1,533
1
10
16

This is considering that the content there is never meant to scroll. If the content gets too large it will overflow into the page – georgephillips May 31 '12 at 22:29
So therefore it wasn't designed to take more than a certain about of content. – Timbadu May 31 '12 at 22:32
Unfortunately the content inside div#pmwRightContainer1 does need overflow:auto .... I should have used a better example with more content in that div. Thank you for your response though. – MinnesotanIce Jun 05 '12 at 22:34

score 0 · Answer 3 · answered May 31 '12 at 22:27

0

This is because it is in your div with overflow auto. Try placing it outside of the box and using positioning to place it

answered May 31 '12 at 22:27

georgephillips

3,540
4
23
30

score 0 · Answer 4 · answered May 31 '12 at 22:43

Depending on how its laid out in code and how the calls are made , I would suggest making the popout "target" the sites man window and not the container that has but button. Follow so far? Basically you have the DIV that has your button and content, right now your popout is either set to target that div or no parameters were set so it's targeting that div anyway. such as target= _blank for HTML or for CSS display: block;

the below is for a popout menu using order and un-ordered list. substitue li and ul for your div ID. Also no the positioning is mine you'll need to edit it as you need for your site.

#button li:hover > ul
{
        display: block;
}


/* PopOut */
#button ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 25px;
    left: 0;
}

popup DIV cut off by container DIV

4 Answers4

Linked