error in buttons.datatables.css | dt-button-background {z-index: 2001} covers the dropdown-menus.

androjesus

div.dt-button-background {z-index: 2001}

The dropdown-menus z-index is only 1000 so when using column visibility on datatables the columns menu gets under the shadow of dt-button-background not allowing to choose options on the dropdown-menu, I fixed it creating the class on my side and moving the z-index of the dropdown-menu to 2002 so the datatables column visibility selector (dropdown-menu) can be operational, I dont know if this can help someone else or datatable team to fix it.

Andro Jesus********

allan

Thanks for posting this.

Are you able to give me a link to the page showing the issue so I can understand the configuration being used and commit any required changes.

Thanks,
Allan

androjesus

I am designing my company's cms and is running as localhost, I can send you a picture or actually, I am using bootstrap with inspinia as theme, inspinia (style.css) is the one that have dropdown-menu z-index set to 1000, I guess every single theme have z-index set to 1000, datatables is using 2001 which is covering the whole page and also the Column Visibility Selector, I guess the solution is to add a css like the one I added to my project:

.dropdown-menu {
z-index: 2002;
}

I also found problems with resizing, when I resize the page the datatable contents goes out of the boundaries of their container (wrapper), I also fixed it on the event onPageResize adding this line of code:

$('#EquipmentsList').width($('#EquipmentsList_wrapper').width());

It just make sure the datatable width is the same of it container.

Thank you for your time,

Andro Jesus

allan

Thanks for the extra information. If the theme you are using explicitly sets its own z-index for the drop down, then setting a value that works for your self sounds like a good way to go.

Regarding resizing, I'm afraid I really would need a link to a page showing the issue (JSFiddle for example) showing the issue to be able to offer any help. You might simply need to include width=100% in your HTML for the table.

Allan

Vincent Wang

101.200.58.76:12518/admin/test.html
Just like this, the 'export button' with a dropdown-menu named '导出' has the same error.
Any idea, Allan? @allan

allan

Forgive me, what link to I have to click in the admin panel to show the page with the issue. I just get what looks like a holding image with a humming bird and clouds with links on the left and top.

Allan