Keeping table filter and length together

AlexanderLamas

Hi guys,

Web application I have created I have used tables with customized buttons on the top left of the table, also, a filter (search) in the middle and a page length in the right hand side.

Is there any way I can keep the table filter and length in the right hand side close to each other ?

I have used this setting for the dom

<'row'<'col-3'B><'col-6'f><'col-3 text-right'l>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>

and I also tried this

<'row'<'col-3'B><'col-6'f><'col-3 text-right'l>><'row'<'col-sm-12'tr>><'row'<'col-sm-12'ip>>

but it always keep a space between them.

Is there a way I can keep them together (no space in between, just a padding) and aligned to the right?

Thank you very much!

Regards,
Alex

colin

Hi @AlexanderLamas ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

AlexanderLamas

Hi @colin ,

Thank you very much for your reply.
Here is the test case.

http://live.datatables.net/topusofu/2/

As you can see in the test case, there is a gap between the table filter and the table length which increases if you expand the screen and diminishes if you shrink the screen, its never consistent.
The table filter even overlaps the page length if you shrink too much.

Is it possible to keep the table filter and the table length always with a space between them? And also aligned to the right?
Example of space, the label and the input of the table filter itself.

Just for background, I'm using bootstrap 4.3.1.

Thank you very much in advance.

Regards,
Alex

allan

Hi Alex,

You can put the f and l options next to either other in the string and then use a little CSS to have them display inline rather than as blocks:

div.dataTables_filter,
div.dataTables_length {
  display: inline-block;
  margin-left: 1em;
}

http://live.datatables.net/topusofu/3/edit

Allan

AlexanderLamas

Hi @allan ,

It worked perfectly!

Thank you very much for that.

Regards,
Alex