Display Search and other items side by side in 2.0

saisworld

Link to test case: https://live.datatables.net/wekurica/1/
Debugger code (debug.datatables.net):
Error messages shown: None
Description of problem: I'm trying to display Search and Buttons side by side on the "topEnd" using "layout". This is not working. They are displayed one over the other. I was able to get this working in the 1.x version. Since I changed it to 2.0 its not working. Is it possible to display them side by side.?

allan

In the test case you provide, you already have info, paging and alphabet search on a single line. Can you not just apply that same approach for the search and buttons?

Allan

saisworld

Hi Allan, They are not on the same line. They are sitting one below the other.

I'm expecting it them to be on the same line. Something like this -

allan

In my example you linked to from another thread, the paging, info and alphabet search are all on the same line:

The example does not show what you posted in the screenshot.

I get the impression that what you are really asking is how to modify the CSS in the example - is that correct?

div.dt-container div.row:first-child > div:last-child {
  display: flex;
  justify-content: end;
  align-content: center;
}

Can be used to target that cell.

https://live.datatables.net/wekurica/2/edit

Allan

saisworld

My apologies Allan, I was looking at your example and I forked it and created a new one but by mistake I copied the old test case example instead of the new one.

The new one that I modified is here - https://live.datatables.net/fibunuyo/1/edit

Yes, you are right, I was looking for displaying all the the controls in the "topEnd" to be on the same line.

Thanks for the CSS that worked like a charm.