How to get datatable's Processing... message to display in front of Table while using scrollX?

mgross

Hi, I'm working on an application that uses a datatable. I'm trying to get the displayed "Processing..." message that occurs when the table is loading more data to appear in front of the datatable, which normally works fine and looks like this

However, after I enable scrollX: true, the message becomes obscured behind the table like this

Any idea about what is going on? I want to have X scrolling enabled an have the processing message shown over top of the table

Here is the code for my datatable

    $('#my-table').dataTable({
        "order": [[2, "desc"]],            
        buttons: [
        'print',
        'copyHtml5',
       ]
        dom: 'Bfrtip',
        searching: false,
        serverSide: true,
        processing: true,
        scrollX: true,
        type: "POST"
    });

allan

It looks like it might be a z-index issue. Could you add:

div.dataTables_processing {
  z-index: 1;
}

to your CSS? I believe that should address it.

Allan

mgross

That's done it. Thank you Allan! I had tried something similar before to no effect, I must have got the CSS selector syntax wrong.

Sudarsh

Thank you so much Allan for the solution. It is working fine....