i need help with the position of elements in DOM

ASHKARdatatables

Hi every one,

i need help with the position of elements

this is the image of my datatable right now

and i want to change it to be like

and this is the DOM code

dom: '<"dt-top-container"<l><"dt-center-in-div"B><f>r>t<ip>',

allan

If you can link to a page showing the issue, that would be useful. It looks like you've got some custom CSS already, since if I use your dom string I get a slightly different layout: https://live.datatables.net/bifumixo/1/edit .

Allan

ASHKARdatatables

unfortunately, my code is not clean right now and it will take time to clean it

this is the css

div.dt-top-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

div.dt-center-in-div {
    margin: 0 auto;
}

div.dt-filter-spacer {
    margin: 10px 0;
}

td.highlight {
    background-color: whitesmoke !important;
}

kthorngren

unfortunately, my code is not clean right now and it will take time to clean it

For this you don't need to clean it. Just update Allan's example with your CSS. This will give us the test case needed to see what you have. Made a couple changes:
https://live.datatables.net/qabotica/1/edit

You can search forums like Stack Overflow for options to align three div elements horizontally. Thats what I did and used one of the solutions provided.

Also I swapped l and f in your dom option to display search to the left and length change to the right.

Kevin

ASHKARdatatables

hi Allan

i want to center buttons

kthorngren

Did you look at my example?
https://live.datatables.net/qabotica/4

I updated it to show the copy and excel buttons you first noted.

Kevin

ASHKARdatatables

Perfect Kevin