problem with the css overflow: hidden property

Question

Hi everyone! I'm having a problem with displaying a popup that's rendered within the html and then just toggled to show and hide it. My problem is that this popup sits in a div that has an overflow: hidden property and it means that some of the popup background graphics cross over the width of the overflow: hidden div. this causes a display issue as the width of the popup is cut off where it crosses the overflow setting.

Is it possible to get around this?

many thanks!!!!! James

Answer 1

If you're fine with scroll bars you could try this css on your container div

.containerDiv {
    overflow: auto;
}

If you would only want vertical/horizontal you could try

 .containerDiv {
        overflow-y: auto;
        overflow-x: auto;

Answer 2

If the popup is to appear on top of your website stick it after the main markup just before the tag. Then use the language making it appear to position it where you need when it pops up.

It should be fairly straight forward if you're using jQuery.

E.g.

<div id="main-website-with-overflow-hidden>
      <!-- Web page stuff -->
</div>

<div id="popop">
      <!-- Popup stuff -->
</div>

Answer 3

please advise! thanks,

Answer 4

Give the pop up div a higher z-index than the div it is contained in

div#container{z-index:1;}
div#popup{z-index: 10;}