How to align elements in the DOM?

th3t1ck

I am using Bootstrap4 and my dom looks like this...

dom: "<'row dom_wrapper fh-fixedHeader'B<'col-sm col-md'>i<'col-sm col-md'>l<'col-sm col-md'>f<'col-sm col-md'>p>" +
    "<'row'<'col-sm col-md'tr>>" +
    "<'row'<'col-sm col-md'i><'col-sm col-md'>p>",

I am trying to get the length, filter and paging to align in the middle so it is even with the information element. How can I accomplish this?

allan

Looks like we need to do some work on that to improve things. However, for the moment try this:

div.dataTables_wrapper div.dataTables_info {
  padding-top: 0.3em;
}

Allan

colin

Here's an example of that: http://live.datatables.net/kelehepe/2/edit

th3t1ck

Thank you both Allan and Colin. That looks better but it only seems to affect the information element. The length, filter and pagination all seem to be different sizes also. How would I go about finding what those are called so I can apply css to them?

th3t1ck

So far I have the following working by trial and error...

div.dataTables_wrapper div.dataTables_info {
  padding-top: 0.8em;
}

div.dataTables_wrapper div.dataTables_length {
  padding-top: 0.8em;
}

div.dataTables_wrapper div.dataTables_filter {
  padding-top: 0.8em;
}

Still trying to figure out the pagination name.

th3t1ck

Got it.

div.dataTables_wrapper div.dataTables_paginate {
  padding-top: 0.8em;
}

Thanks again for your help and great product.

allan

Looks good - thanks for posting back your findings.

Allan