div shown with jquery is cropped

Question

I'm trying to fight a strange behaviour - and any help is appreciated.

I have a long and complex HTML page with general structure about like this:

+------------------------------------------+
| Page header                              |
+-----------------------------+------------+
|                             |  Right     |
| Main content                |  Column    |
|                             |            |
+-----------------------------+------------+

In the "main content", all the action is taking place. One of the thing that may happen is on a user's button click, a div with absolute position, which is initially invisible, is being displayed and its content is populated using AJAX (i.e. I don't know in advance how much content there is).

This works fine if the overall height of this div ends up smaller than the available height of the "main content". If however this "popup" div ends up being long due to a lot of content, then it's truncated at the bottom of "Main content" div. As there's nothing below, I can't even scroll down to see all the content of the popup. I would want the "main content" to grow to accommodate the entire height of the popup and the page to be scrollable all the way to the bottom of the popup, but this is not happening.

Here is CSS for my "main content":

.content {
    width: 770px;
    position: relative;
    overflow-x: visible;
    overflow-y: hidden;
}

And here's the CSS for the popup:

#popupedit {
    background-color: #f1f0ec;
    width: 770px;
    z-index: 100001;
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
}

In HTML, popupedit is a direct child of content. There's no height or max-height restriction anywhere in the chain. So why isn't "content" growing to accommodate the "popup"?

Answer 1

You could possibly solve this by removing the absolute positioning and using a different technique (i.e. floats) to position the popup. Let me guess, position: absolute is required too? :) If so, then there's still hope: You can resize the content div with JavaScript after the content has loaded.

$(".content").css("min-height", $("#popupedit").height()+"px");

Of course this would have to run after the popup has fully loaded, and you should probably undo the resize after the popup goes away:

$(".content").css("min-height", "");

Answer 2

Looks like you're creating the popup within the .content div.

This has overflow-y: hidden which will hide any overflow.

Try moving the popup out of the content div.

Answer 3

Remove overflow-y: hidden; and it should work. Also I would recommend giving popupedit fixed height

Edit: Ok try this hack

JS:

var hh = document.getElementById('popupedit').offsetHeight;
document.getElementById('fix').style.height = hh + "px";

CSS:

.content {
    width: 770px;
    position: relative;
    overflow-x: visible;
    overflow-y: hidden;
    height: auto
}
#popupedit {
    background-color: #f1f0ec;
    width: 770px;
    z-index: 100001;
    position: absolute;
    left: 0px;
    top: 0px;
}

#fix { width: 770px; }

HTML:

<div class = "content">
    <div id = "popupedit">
        <p>Something important</p>                
    </div>
    <div id = "fix"></div>
</div> 

Answer 4

Try removing the position:relative; of .content. This isn't needed anyway (unless you need it for something that you have not said). This is a great misunderstanding. A lot of people use position: relative; for almost all elements. That's not needed AT ALL.

In this case it can even cause trouble, because #popupedit will now position itself absolutely to its parent and not to the window. What I suggest is, deleting position: relative;, giving the pop-up a static width an calculating its horizontal position with jQuery to centre it. Also get rid of top: 0; and left: 0;

Then you add this snippet of code to the code you call for popping-it-up, or in a seperate file (doesn't really matter):

$("#popupedit ").css({
    left: ($(window).width() - $('.className').outerWidth())/2,
    top: ($(window).height() - $('.className').outerHeight())/2
});​