We are facing a challenge within our team that we are struggling to resolve. Our Grid control has been customized by us. When the icon next to the column name is clicked, a pop-up div (referred to as divFilter) appears, allowing for filtering options to be set. Each column can have its own dynamically generated div, resulting in up to 5 divFilters displayed in various locations.
While this setup works well overall, one issue we encounter is that when there are only 1-2 records in the Grid, the pop-up div may appear beneath the horizontal scroll of the parent div. We attempted to address this using z-index without success. Setting overflow:visible would solve the problem, but given the large number of columns (up to 50), we also require the horizontal scroll. We explored options like setting overflow-y:visible and overflow-x:scroll, but it seems this approach might not be viable based on our tests and references such as this page: , particularly for IE7 and IE8.
I came across a related query on CSS overflow-y:visible, overflow-x:scroll, however, our requirement for the pop-up div to be position:absolute complicates matters since they need to align with the columns.
Do you have any ideas or workarounds for this issue? Is it feasible to address it solely through CSS without resorting to JavaScript for dynamically adjusting gridview height, etc.?
Thank you!
Additional:
I've created a simplified code snippet illustrating the problem on jsFiddle: http://jsfiddle.net/XL5JD/
<div id="divOuter" style="position: relative; overflow: scroll; height: 100%;">
<div id="divGv" style="height:90px;width:3339px;background-color:#7A8B8B">
<div id="divFilter" style="position:absolute;z-index:20px;background-color:#000000;width:30px;height:300px;margin:10px">
</div>
</div>
</div>In the example above, the black div (pop-up) is hidden, requiring the use of the vertical scrollbar to view all its content. Displaying the entire pop-up using scrollbars is less than ideal, so the goal is to have the black div visible above or over the horizontal scrollbar. However, due to the potentially significant width of the gridview (middle div), simply setting overflow:visible for the first div is not an option. While changing the position to fixed is ruled out as a solution, I suspect achieving this effect solely through CSS may not be possible, but I'd prefer to double-check before delving into JavaScript :)