Custom DOM positioning problem

noktus

Hello everyone,

I'm new to DataTables. I have a table with the next custom dom positionig:

"dom": '<"top"lr>t<"bottom"ip>'

The table is shown ok in the first load. The lengh changing and the processing message in the top section, then the table and in the bottom the info and the pagination.

But when I sort a column or reload the table data the "processing" message loses its position and returns to the absolute position on top of the table.

The strange thing happens when I remove the "t" element of the dom positioning definition. If there is no t element the processing the processing message works fine, for example:

"dom": '<"top"lr><"bottom"ip>'

shows in the top the length and the processing, then the info and the pagination, and then the table. When I reorder or reload the processing message remanins in the top position.

¿Any idea on how to fix that?

Thank you in adnvance!

allan

The strange thing happens when I remove the "t" element of the dom positioning definition.

The t is the table. You must have that in the dom parameter. Not showing the DataTable would make DataTables fairly pointless .

Allan

noktus

Yeah, I know.
But I cannot have the table and the Processing message working ok at the same time.
Maybe it's better said that is surprising that when there the table is not related the positioning works as expected.

Maybe we can forget about that and let the question as, why my setup "dom": '<"top"lr>t<"bottom"ip>'is not working when I sort the table?

allan

My guess is that it is a CSS issue. Can you five me a link to the page showing the issue so I can check it out and offer some help please?

Allan

noktus

Hi Allan,
Thank you, this was the clue I needed.

For me is difficult right now to give you an url.

But I fixed it by overriding the "top" property of the processing element to 0 px. Here is my css with some other changes:

.dataTables_wrapper .dataTables_processing {
    width: 30%;
    margin-left: -13%;
    margin-top: -8px;
    padding: 0 0 0 0;
    background: white;
    border: 3px solid #92D050;
    border-radius: 6px;
    height: 28px;
    top: 0px;
 } 

Thank you