Dom positioning in Bootstrap

satheshshiva

I am using Bootstrap. When I use the DOM Positioning say "flipt" all the controls appear in separate lines because everything is inside an individual div even though I didn't mention any "<" or ">".

allan

The dom value for Bootstrap is a lot more complicated than for default DataTables as it uses Bootstrap's grid layout.

The dom documentation details the default value for Bootstrap. You could use that as the basis for your own customisation.

Allan

craiglytle

I found it helpful to start by duplicating the default by adding the following to my table:

dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>"

Then modifying this was straight-forward.

kputcha

That works, but how to get them on a proper horizntal line ?
"dom" : "<'row'<'col-sm-4'i><'col-sm-4'f><'col-sm-4'p>>" + "<'row'<'col-sm-12'tr>>",

kputcha

Following up on craiglytle's pointer above, I added a css style:
.searchStyle
{
padding: 5px 12px;
margin-top: -28px;
}

and used that syle in the dom definition on the datatable:
$('#example').DataTable({
"dom" : "<'row'<'col-sm-4'i><'col-sm-4'f><'col-sm-4 searchStyle'p>>" + "<'row'<'col-sm-12'tr>>",

Result is a perfect alignment:

I guess I can similarly adjust other DOM elements like info..

Thanks to **craiglytle **