New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
After applying fixed column to the database, popup menu is opening behind the below action button.
I am applying fixed column to the datatable by
fixedColumns: {
left: 0,
right: 1
},It worked but when clicked on the actions button, a menu popup was hidden behind the below action button. I have tried initializing menus as below
datatable.on("draw", function () {
KTMenu.createInstances();
});but still did not work, It only worked when the fixed column was removed.
Replies (3)
Hi Megha,
Instead of initializing the menu immediately after the "draw" event, try adding a slight delay before initializing the menu. This delay might ensure that the fixed column has fully rendered before the menu is initialized.
datatable.on("draw", function () {
setTimeout(function () {
KTMenu.createInstances();
}, 100); // Adjust the delay as needed
});Thanks
Hi,
This can happen because the fixed column has a higher z-index than the popup menu, causing it to appear on top.
Increase the z-index of the popup menu:
This is the most straightforward solution. You can increase the z-index of the popup menu CSS style to ensure it appears above the fixed column.
.dropdown-menu {
z-index: 1000; /* Increase z-index to a higher value than the fixed column */
}There might be a bug in the specific datatable library you're using that causes the popup menu to be hidden. Consider upgrading the datatables.net version.
Thanks
No, it is not working. Data is loaded by Ajax. and the menu was reinitialized after data loading. I am not sure if Ajax data loading is causing the issue or not.
