1

I am working on an Excel-like grid and am having trouble displaying a pop-up properly since the bottom appears cut-off by the container div.

The problem is very similar to CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container and I am looking for similar results, but inside a containing div. I can achieve the layout I want without the containing viewport.

The basic layout & styling is:

<body>
    <div class="viewport">
        <div class="canvas">
            <div class="rows">
                <div class="row">
                    <div class="cell">
                        <div class="cell__Value">
                            <div>
                                <div class="popup">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

.viewport {
    height: 150px;
    width: 400px;
    background-color: blue;
    overflow: hidden;
    position: absolute;
    top: 35px;
}

.canvas {
    height: 149px;
    width: 399px;
    background-color: lightblue;
    overflow-y: scroll;
    overflow-x: auto;
    position: absolute;
}

.rows {
    height: 100px;
    width: 700px;
    background-color: red;
    overflow: hidden;
}

.row {
    background-color: darkred;
    height: 35px;
    overflow: hidden;
}

.cell {
    background-color: green;
    position: absolute;
    left: 100px;
    width: 100px;
    height: 35px;
    overflow: visible;
}

.popup {
    background-color: lightgreen;
    opacity: 0.8;
    position: relative;
    width: 150px;
    height: 200px;
}

I've created a mocked version using jsFiddle - http://jsfiddle.net/huf45f2h/2/, and I can't get it to work here either.

Essentially, the canvas must scroll y-overflow content so the grid rows are scrollable and do not fill the entire page. The pop-up in the fiddle is an informational div that should appear when a user clicks on a single cell. As the mock shows, the height of a large pop-up causes the viewport and canvas to scroll, rather than allowing the pop-up to appear on-top and partially outside of the viewport.

I attempted to follow the advice here - http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent, but to no avail. I have also tried floating the pop-up and increasing the z-index.

How can I display the pop-up as desired?

Community
  • 1
  • 1
Rich
  • 162
  • 3
  • 11
  • the `height` is affecting .. – Amit singh Aug 17 '15 at 11:58
  • Did you miss your css for the parent div (cell_Value)? I'm not finding it in your fiddle or code snippet, and the article you link to says that it and the grandparent div's relationships to the child are what allow this effect to happen. If I had time to build and test a fiddle, I would test it for you, but I have to get to work this morning. If this is still unanswered when I have time later I'll look into it more. – Chris Aug 17 '15 at 12:07
  • Try this: .popup { overflow-y: hidden; } – zer00ne Aug 17 '15 at 12:08
  • @Chris - The fiddle is as the markup/styles are currently, before I attempted anything & the div with class `.cell__Value` doesn't have any meaningful style applied to it. Moving the overflow style from the grandparent cell in to this div as per the article does not seem to achieve what I want - I suspect it is due to the relationship with other position:absolute ancestors. @zer00ne, hiding the overflow of the popup is not what I am looking to achieve. I would like the entirety of the popup content to be visible, on top of the grid and expanding out of the viewport if necessary. – Rich Aug 17 '15 at 12:25

1 Answers1

-1

If i understand your problem, the fix should be easy.

Just set the position to fixed, then it will be on top of everything else. That a very common approach for popups.

.popup {
background-color: lightgreen;
opacity: 0.8;
position: fixed;
width: 150px;
height: 200px;}
Christian Mathiassen
  • 44
  • 5