Question

We have a problem in our team which we cannot solve :/ We made our own Grid control. When you click on the icon next to column name, the pop-up div (call it divFilter) appears and you can set filtering there. There can be dynamically generated div for each column so we can have f.e 5 divFilters in 5 different places.

It works, but the only problem is that when there is for example 1-2 records on the Grid, the pop-up div will be displayed under horizontal scroll of parent div. We’ve tried with z-index but it looks like that won’t work. We can set overflow:visible but we also need that horizontal scroll(our grids have up to 50 columns). We thought that we can solve it buy setting overflow-y visible and overflow-x:scroll but according to our tests and that page: http://www.brunildo.org/test/Overflowxy2.html it isn’t possible(for IE7,IE8).

I’ve also found this similar question CSS overflow-y:visible, overflow-x:scroll ,but our pop-up div must be position:absolute, because we need to position them under columns.

Any ideas or workaround to it? Is it even possible to set it only with CSS without using Javascript(for dynamically changing gridview height etc.).

Thanks!!

Added:

Ok, I’ve created very simplified code fragment of my 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>

As you can see, black div(pop-up) is hidden and we need to use vertical scrollbar to see its whole content. It doesn’t look good to use scrollbars to see entire pop-up, so we would like that black div to be displayed above/over horizontal scrollbar, but because our gridview (middle div) can be very wide, we cannot just set overflow:visible for 1st div. As I said before, changing position to fixed won’t be solution. I am almost sure that it cannot be done only by using CSS, but I’d like to ask before messing up with JavaScript 🙂

Answer 1

Safest solution in my opinion is to set a min-height on the grid.

Also it sounds like your grid needs javascript for filtering etc. So why not use javascript to smartly compute the minimum height factoring in the popular filter div height.