Position of search panes using Bootstrap 4 with button

Position of search panes using Bootstrap 4 with button

casscass Posts: 2Questions: 1Answers: 0

Test case: https://jsfiddle.net/hk7j5zc2/

When the button is clicked, the search panes are left-aligned with the window, rather than aligned with the Data Table.

This is using the Bootstrap 4-specific dom definition in the table config. If you use the standard dom string ('Bfrtip'), the search panes are positioned correctly, but the trigger button position is wrong - it appears one line above the Search box (view the test case full-screen to see this properly).

Is there any way I can achieve correct button position and have the search panes appear within the Data Table?


  • casscass Posts: 2Questions: 1Answers: 0
    edited September 16

    Fixed it with the aid of this discussion: https://datatables.net/forums/discussion/56575/keeping-table-filter-and-length-together

    Kept the dom as 'Bfrtip' to ensure the correct search pane position, and added this CSS to keep the button and the Search box on the same line:

            div.dataTables_filter {
                display: inline-block;
                margin-left: 1em;
            #company-summary_filter {
                float: right

    (where company-summary_filter is the ID of the Search box DIV)

  • allanallan Posts: 56,836Questions: 1Answers: 9,033 Site admin

    Thanks for posting back!

    The dom parameter is a total PITA. DataTables 2 (not sure when it will be released yet!) will be replacing it with something a lot more intuitive (that part is already done in fact - other bits still to do before the release...) :).


Sign In or Register to comment.