Buttons and Filter Top alignment BS-4.1.1, DT-1.10.18

artbermas

I have been using datatables 1.10.18 with BS-3.3.7 with no problem. (see image below)

I decided to move to BS4.1.1. but still using datatables 1.10.18 but the buttons and filter field are not aligned (see image below)

My code for the above are exactly the same.

    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("fetchData").innerHTML = this.responseText;

            //DataTable
            $('.table-fixed').DataTable({
                //Element placements within the DOM
                destroy: true,
                dom: 'Bftip',
                scrollY: '65vh',
                scrollCollapse: true,
                scrollX: true,

                //Buttons
                buttons: [
                    //export to excel
                    { extend: 'excel', text: 'Export to Excel' },

                    //print the table
                    'print'
                ],
                paging: false,
            });
        }
    }

For more clarity, I included the XMLHttpRequest part.

The table for the images above are the same table and the scripts related to that page are the same.

The only difference between the two images is the Bootstrap version.

To eliminate any conflicts, I decided to start fresh and linked to the correct packages using DataTables' download page but it's still giving me this issue.

Any work around to resolve this issue?

Appreciate any help you can give.

Thank you.

kthorngren

Its likely a CSS issue. The Buttons with BS 4 example seems to work correctly. The problem looks to be isolated to your environment. For us to help debug your page please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

artbermas

Its likely a CSS issue. The Buttons with BS 4 example seems to work correctly. The problem looks to be isolated to your environment. For us to help debug your page please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Thank you for your quick reply.

I'll take a closer look first into that link you posted, maybe I missed something.

Just to be sure, I have cleared all my custom css except for this -> white-space: nowrap;

I even remove the Navbar, just to be sure, but no luck.

If I cannot fix it, I will provide a test case.

Again, thank you very much.

artbermas

The issue seems to be happening at DataTables' CSS of the btn-group (see below)

btn-group, .btn-group-vertical {
    position: relative; /* this seems to be the issue */
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
}

I just replaced position: relative to position: absolute and everything lined up.

rldean1

@artbermas & @kthorngren

I'm experiencing the same exact problem.

I tried the same CSS 'fix' you'd mentioned, but it goes deeper than that.

In my situation, the example_wrapper div is missing all the BS rows and columns. Specifically, there should be three rows, one for the header, table, and footer.

I can't figure out why they're missing, yet.

I used the download builder to download the DT files, and I also used the concatenated/minified string as well.

allan

Hi @raydlevel5 - If you give me a link to your page I'd be happy to take a look and see what the problem is.

Thanks,
Allan

rldean1

@allan

Cool, okay, I was able to replicate it here:

http://live.datatables.net/hofolece/1/edit?html,js,output

I can get the 3 BS rows to come back by commenting-out dom: Bft.

I'm pretty sure I'm following the examples to the letter, unless I'm totally missing something.

allan

dom: "Bft",

That is basically telling DataTables to layout the table and its feature plug-ins (like Buttons) as simply:

1. Buttons
2. Filter
3. Table

There is no information about a grid layout. If you have a look at the dom documentation you'll see that the Bootstrap default includes grid elements to get the layout, so you need to do something similar: http://live.datatables.net/hofolece/5/edit .

Allan

rldean1

I owe an explanation (for hopes it might help someone else)

In my other apps, I've never had to manipulate dom to get BS buttons to show. Perhaps this is a peculiar scenario, being that I'm opening a DT in a BS modal, or perhaps something is wrong with my application -- like the order of operations.

Order of operations, buttons will NOT show (for me specifically):

1. establish JS var containing jQuery table structure html = $('<table/>').attr({ id: "tblCluster", class: "table table-striped table-bordered" }).css({ width: "100%" });
2. append table structure to DOM and use BS to open a modal with that HTML structure
3. initialize the Editor (instance is using AJAX and a callback)
4. initialize the DataTable ((instance is using AJAX and a callback))
5. append the buttons (didn't work) tblCluster.buttons().container().appendTo('#tblCluster_wrapper .col-md-6:eq(0)');
6. activate inline edit

FIX (observation)

The only way I was able to get the BootStrap buttons to append was by typing the append statement (line #5 above) in the console. This led me to believe somehow my app was losing access to the scope where the table is defined... or maybe things were happening too fast for tblCluster.buttons().container().appendTo() to finish.

SO.... what I ended up doing was moving the append statement to a "DataTables on init" option: }).on('init.dt', function(){

That way, I was guaranteed for the table to be fully established before trying to append the buttons.

Anyway, that's what worked for me.

rldean1

OHHHHH and side note: get rid of DOM if you're trying to have the BS buttons!!!!

Yeah, you don't get the correct BS framework for your table if you include DOM!!!

OH OH OH, and if you still want all the other bells and whistles, instead of using DOM, then use the corresponding "real text" options:

                                // instantiate the DataTable
                                tblCluster = $('#tblCluster').DataTable({
                                    //dom: "Bft", // DON'T USE WITH BS (MY OPINION)
                                    // pageLength: -1,
                                    paging: false,
                                    lengthChange: false,
                                    searching: true,
                                    info: true,

allan

Yup - the dom option is a bit tricky with Bootstrap (and the other integrations) which is why we typically don't use it in our examples.

This is a known pain point in DataTables and v2 is going to fix that with a new layout option (actually, I've committed that feature already, but there is a ton of other stuff still to do for v2).

Allan