Need to send jquery-ui zindex back for dropdown menu

st3ph3n

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:

Description of problem:

I've added a CSS dropdown menu to my flask template, that is extended to all pages. On one page I'm using a datatables table with the jquery-ui template.

If I change the z-index of the table to -1, elements in the table (buttons/selectable dropdowns) are not clickable, but the top menu dropdown passes on top of the table as intended (see image), except not in front of the grey bar that has the 'Show # Entries' and 'Search' field, that is in front of the dropdown. I can't select anything in the dropdown that is below the top of the table, or see what's behind the grey bar.

I need the dropdown to appear in front of both the top bar and table without inhibiting the selection of the menu, as well as the functional items within the table. Is this a datatables position problem? Or a CSS menu problem? (I've added high z indexes to the CSS code)

If I add a bunch of <br> to the html to push the table down, then both work as intended (removing z-index -1 from table tag), but I want the table at the top.

Thanks.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

st3ph3n

Here's a test case: http://live.datatables.net/nobasapo/1/edit

Which works as intended, and how I have it setup on my server. I've tried everything, and can't explain why the dropdown continually goes behind the table on the server. Every other page works as intended as well, except for the page with the DataTable.

kthorngren

I see a couple issues. Not sure they will fix the problem on your production server though. You are duplicating some of the JS libraries which could cause conflicts, for example:

Loading jquery.js twice:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

Loading datatables.js twice:

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

Each of these should only be loaded once.

Maybe you have other HTML and classes between the header element and the table. In the test case you have the default <div class="container">. See if changing this to replicate your server environment helps to show the problem.

Kevin

st3ph3n

@kthorngren, it turns out I had a some header information in the CSS code that was inhibiting the dropdown from displaying properly.