How to space and align the information, pagination, search, etc.

th3t1ck

I'm trying to figure out how I can align to the top and spaces between the information page number, search and pagination. Currently it looks like this...

kthorngren

It looks like you might be using Bootstrap 4, is that correct?

What does your dom look like. You can see an example using BS 4 here:
https://datatables.net/reference/option/dom#Styling

There could be many reasons for the layout issues. In order for us to help we would need to see what you have. Please provide a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

th3t1ck

Yes bootstrap4
I work on a page for you.

th3t1ck

Ok I have a page for you to look at...
live.datatables.net/huqaqopi/3/edit

th3t1ck

I forgot to change "sticky" to fixed.
live.datatables.net/fecenamu/1/edit

colin

Hi @th3t1ck ,

Is this an issue still, or did you resolve it?

Cheers,

Colin

th3t1ck

Still an issue

allan

If you want a quick hack, then you could use:

div.dataTables_filter,
div.dataTables_length {
  padding-top: 0.65em;
}

However, a proper fix, would be to use Bootstrap's grid layout with vertical alignment since you are defining your own dom option.

Allan

th3t1ck

Thank you Allan. Can you provide an example of setting the DOM elements using Bootstrap please?

colin

Hi @th3t1ck ,

This tutorial may help - seems to have a few good examples there.

Cheers,

Colin

th3t1ck

Thank you Colin.