CODEWITHSUNDEEP
javascriptcsspopup
MinnesotanIce
MinnesotanIce

Reputation: 31

popup DIV cut off by container DIV

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

Upvotes: 2

Views: 5495

Answers (4)

john.weland
john.weland

Reputation: 266

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;
}

Upvotes: 0

gearsdigital
gearsdigital

Reputation: 14205

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;
}

Upvotes: 12

georgephillips
georgephillips

Reputation: 3570

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

Upvotes: 0

Timbadu
Timbadu

Reputation: 1551

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;

}

Upvotes: 5

Related Questions