mkoryak/floatThead

bootstrap dropdown in header cell breaks horizontal scroll

shpongly opened this issue · 6 comments

shpongly commented

Hi,
Great work !! But I do have a problem with the horizontal scroll.
I have a table with about 9 columns (can be more). On the first header cell I created a bootstrap dropdown.
My table has a wrapper with an overflow:auto since I need both vertical and horizontal scroll. I init the plugin and I found out that the dropdown-menu (in open state) is behind the tbody element. I found a solution for that problem and is to set the following rule in a CSS:

div.floatThead-container {
    overflow: visible !important;
}

The solution is great and fixes the dropdown-menu hidden behind tbody problem but sets a new one when horizontal scroll exists. With this rule in the CSS, header cells are not scrolling with the rest of the table, and only tbody is scrollable (I have no issues with the vertical scroll). If I remove the CSS rule horizontal works as expected but the dropdown is not shown.

Is there any fix / workaround to this?

Thanks.

mkoryak commented
shpongly commented

I forgot to add the jsFiddle:

https://jsfiddle.net/k8Lth256/

Sorry about that

mkoryak commented

Sorry, this wont work because of css stacking contexts. You cannot have the dropdown body live inside the header and have it be visible. The only way you can solve this is by putting the dropdown body outside the header and positioning it in the correct place.

soltmar commented

Hi, is there any way to go around that without moving dropdown out of header ?

mkoryak commented

No, there is not.

You don't have to move the drop-down, just the drop-down body that drops down.
Maybe bootstrap has an option for that, and if not, I'm sure someone has done this before and published code

lock commented

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.