1

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 :)

Community
  • 1
  • 1
Kostrzak
  • 161
  • 4
  • 19
  • It's much easier if people can actually *see* some code, rather than you trying to describe it to them. – Damien_The_Unbeliever Jul 10 '12 at 09:32
  • We have 3 divs: 1st outer div with position:relative and overflow:scroll, 2nd with gridview and 3rd pop-up div(dynamiclly added) with position:absolute. We need to have that 3rd pop-up div ALWAYS visible, but its being coverd by horizontal scrollbar. We need to make that pop-up div to be displayed even outside 1st div(which can normally be set by overflow:visible) but in the same time we need to have horizontal scrollbar. I may try to prepare some code fragment later. – Kostrzak Jul 10 '12 at 09:38

1 Answers1

2

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.

Moin Zaman
  • 25,281
  • 6
  • 70
  • 74
  • We do not filter in javascript (to big amount of data) but I like the solution with setting min-height in javascript. It still doesn't look great(especially in IE7), but much better than the version with scrollbars. – Kostrzak Jul 13 '12 at 13:27
  • yep, tables are ba$tards in that way...tho not the most elegant, min-height is the easiest solution to most cases. – The Vojtisek Mar 30 '17 at 08:09