SarathSprakash SarathSprakash - 6 months ago 11
Javascript Question

Pop up div shinks on browser resize

I have a popup which will get shrink and the content will dislocate on the browser window resize. I am stuck with this

Here is the fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/

and here is the fullscreen fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/show/

Maybe you could view and check resizing the window

HTML



<div id="popup" >

<div id="img-section" >
<img src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/256/single-bird-icon.png" />
</div>
<div id="description">
//text content
</div>

</div>
<div id="fade" class="black_overlay"></div>
<a href="#"> click here</a>


CSS



.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
min-width: 100%;
min-height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#popup {
display: none;
position: fixed;
top: 8%;
left: 10%;
max-width:1200px;
max-height:600px;
height:auto;
width:auto;
padding: 16px;
background-color: white;
z-index:1002;
overflow:hidden;

}
#img-section {
position:relative;
width:800px;
float:left;
background:black;
cursor:pointer;
height:600px;
padding:5px;
margin-top: -20px;
margin-left: -15px;
margin-right: 10px;

}
#description {
position:relative;
background-color: #fff;
max-width:400px;
overflow-y: auto;
position: relative;
word-wrap: break-word;
max-height:600px;
height:auto;
padding: 20px;

}
#img-section > img {
display:inline-block;
height: auto;
vertical-align:middle;
width:auto;
}


I want the poup to remain as it is, It should not shrink

Thanks in advance

Answer

Side scrolling for a popup is horrible, but:

  • make the popup position: absolute instead of fixed
  • give the body a min-width of left margin + popup width (currently that would be calc(1200px + 10%)
  • same for height?
  • make all max-width => width, because you know how much room you have

Your existing CSS is mighty strange, but this might do it: http://jsfiddle.net/rudiedirkx/ZjdU4/1/

Highlights:

body {
    min-width: calc(1200px + 10%);
}
.black_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#popup, #popup * {
    box-sizing: border-box;
}
#popup {
    position: absolute;
    width: 1200px;
    height: 600px;
    padding: 0;
}
Comments