Display Search and other items side by side in 2.0

Display Search and other items side by side in 2.0

saisworldsaisworld Posts: 6Questions: 2Answers: 0

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.?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    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

  • saisworldsaisworld Posts: 6Questions: 2Answers: 0

    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 -

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin
    Answer ✓

    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

  • saisworldsaisworld Posts: 6Questions: 2Answers: 0

    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.

Sign In or Register to comment.