Custom DOM positioning problem

Custom DOM positioning problem

noktusnoktus Posts: 3Questions: 0Answers: 0

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!

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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 :smile:.

    Allan

  • noktusnoktus Posts: 3Questions: 0Answers: 0

    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?

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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

  • noktusnoktus Posts: 3Questions: 0Answers: 0

    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

This discussion has been closed.