div shown with jquery is cropped

Tags: jquery,css,height,truncated

Problem :

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"?

Solution :

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", "");

    CSS Howto..

    How to give css sprites effect?

    How to prevent artifacts from appearing in Webkit when scrolling the page after stopping CSS animations

    how to make menu on mouse hover in CSS

    How to make a page look good printed/across multiple browsers

    How to set font “ Balzano” to the text in enclosed in

    on my website?

    How does the CSS position on a div affects position of sibling division?

    CSS: How to get position and size relative to screen width?

    How can I get the bottom padding of an input working in IE8?

    How To Get Color of WebElement From Complicated css case using Webdriver?

    jquery - How to determine if a div changes its height or any css attribute?

    How to reposition my jQuery popup?

    How to use css value for javascript in IF-THEN construction? [closed]

    How can I customize COUNT nodes with css

    how can I center button below my text while using bootstrap css?

    How to customize bootstrap css when using bootstrap-sass [closed]

    How to center text based on only one of two merged cells ? html/css

    CSS - How to match class (one dynamic and one static) between two elements

    How to animate a div to move from end to end infinitely

    How to stop divs moving under each other when zooming out

    How to move elements inside the left column of a 2 column css grid above and below the main content area on collapse

    How to make CSS for search results

    How to style using d3's .style() method instead of using CSS in style tags for .axis path {}?

    how to place an image at the center of the browser irrespective of the resolution?

    hide and show Div on click

    CSS print stylesheet generated content not showing up

    How to line up lists side by side?

    How does Materialize icons work? [duplicate]

    Responsive layout, how to keep text at bottom of dynamically resizing image

    How to get table to overflow within a flex div?

    How to create a simple social sharing dropdown menu in CSS/HTML