Position of search panes using Bootstrap 4 with button

cass

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?

cass

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)

allan

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

Allan