I am currently developing a grid system similar to Excel, but I am encountering issues with displaying pop-ups properly as the lower part gets cut off by the container div.
This problem is reminiscent of a situation discussed in a Stack Overflow post titled 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 seeking a solution that can provide similar results within a containing div. Achieving the desired layout without using the viewport has proven challenging.
The structure and styling of my setup are as follows:
<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;
}
To visualize this issue, I have set up a simulated scenario on jsFiddle - http://jsfiddle.net/huf45f2h/2/, but unfortunately, it does not function correctly either.
In essence, the goal is to allow y-overflow scrolling within the canvas so that the rows in the grid are scrollable without occupying the entire page. The pop-up in the fiddle serves as an informational element meant to appear upon clicking a single cell. However, as demonstrated in the mock example, when the pop-up's size is large, both the viewport and canvas start scrolling instead of positioning the pop-up partially outside the viewport.
Various recommendations from resources like have been attempted without success. Strategies such as floating the pop-up and adjusting the z-index were explored as well.
What steps can be taken to resolve this issue and ensure the pop-up displays as intended?