CODEWITHSUNDEEP
jquerycssdrop-down-menuhtml-table
tonybrown
tonybrown

Reputation: 131

How to display drop-down over other divs?

So I have a table that I made it scrollable horizontally by changing the table scrollable in css.

However, dropdown menus started to be cut off near the end of the table in a scrollable manner. So the dropdown menus are technically visible, but you have to put the cursor near the dropdown and try to scroll down to see the rest of the dropdown menu. I tried to make overflow-y hidden which disabled the vertical scroll but that didn't make dropdown go over the other divs. And of course z-indexes too..

So before the code snippet it looked like this(as you can Options buttons get cut off):

enter image description here

        $('.table-scrollable').css({'display' : 'inline-block', 'width' : '100%', 'overflow-x' : 'auto'});
        $('.dropdown-toggle').css({'z-index' : 9999});
        $('.dropdown-menu').css({'z-index' : 9999});
        $('.li').css({'z-index' : 9999});

And after the code, it looks like this:

enter image description here

How can I have the table both scrollable horizontally and still make the dropdown menus visible as it used to? So the dropdown menu would go over the page numbers?

Upvotes: 2

Views: 3009

Answers (1)

Ultrazz008
Ultrazz008

Reputation: 1688

Set your dropdown to fixed position, replace your code:

$('.dropdown-menu').css({'z-index' : 9999});

to:

$('.dropdown-menu').css({'position' : 'fixed', 'z-index' : 9999});

but there will be other problems with position fixed...

or instead of making position fixed make your table-scrollable has fixed height, so it always can allow dropdown to fit it's height without hidding it, change:

$('.table-scrollable').css({'display' : 'inline-block', 'width' : '100%', 'overflow-x' : 'auto'});

to:

$('.table-scrollable').css({'display' : 'inline-block', 'width' : '100%', 'min-height': '200px', 'overflow-x' : 'auto'});

(I guess your problem made overflow, when you have no-data in table)

Upvotes: 1

Related Questions