Styling DOM

NoBullMan

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I am trying to put table information, 'i', on top right, above the table, so users can see count of records without having to scroll down.

I set the DOM to be:

dom: "<'row'<col-sm-4'l><'col-sm-4'B><'col-sm-4'i>>"

However, I am having a hard time pushing table info text right.
I added text-right, mr-2 to the style for 'i', it has no effect.

Seems the only way is to update datatable's own style:

.datatable-wrapper .datatables-info {
    clear:both;
    float: right;  /* instead of float: left */
}

But I don't want this to be applied to all tables in the solution, even to all tables on the page; just one particular table.

kthorngren

I think it would be easier with Datables 2? using the layout option. For example:
https://live.datatables.net/yasovifu/1/edit

However if you don't want to upgrade then I would not update the datatables.css file but use the style tag on the page to override the default Datatables style. Possibly use the above or if you hav more than one table chagne the selector to use the id assigned to the info div. For example:

div#example_info {
    clear:both;
    float: right;  /* instead of float: left */
}

Where example is the id of the table.

Kevin

NoBullMan

Thank you Kevin. That did the job.