Issue with Bootstrap Navbar Toggle and Data Tables

jtester

I have an issue with the collapsible navbar made with bootstrap. When I reference the Data Tables CDN links in my head, my menu will NOT collapse after opening it in a mobile window. It flickers really fast to closed and then re-opens. Basically I can't close it. If I remove the DataTables cdn references then everything works fine.

Here is my navbar code:

 <div class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header navbar-left">
            <center>
                <button type="button" class="navbar-toggle navbar-text" data-toggle="collapse" data-target=".navbar-collapsev">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </center>
        </div>
        <nav class="navbar-collapse collapse">

//etc.....

here are my CDN links:

<!-- DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/bs-3.3.6/jq-2.2.0,dt-1.10.11,cr-1.3.1,r-2.0.2/datatables.min.css" />

<script type="text/javascript" src="https://cdn.datatables.net/t/bs-3.3.6/jq-2.2.0,dt-1.10.11,cr-1.3.1,r-2.0.2/datatables.min.js"></script>

Rodders

@jtester - did you resolve this? I kind of have the opposite. On any page that has datatables in, the collapsible bootstrap menu wont open.

Ive done a bit of investigation and my first thought was that i chose the bundled option to bundle everything together into one datatables.min.js and css file set for download and i chose the option to bundle bootstrap in as well because I'd be using that for styling. I went back and created another bundle without bootstrap (because i was already loading bootstrap) and the menu worked. However because the bundle now didnt include bootstrap it didnt think it had the required files and so all my button styling went to pot. I'll be fiddling with this later to see if I can resolve but my hunch is that because I am loading bootstrap outside of datatables and also bundling inside of the datatables that this is causing the conflict. I'm going to try removing the manual bootstrap file later on and just tell it to have data tables capability on every page to see if that solves my problem but thought something similar might also solve yours too.

Konrad

Same here. Tinkered around for hours, trying to change the classes of the collapsible nav and attributes like aria-expanded etc, all without luck.

I came up with this ugly workaround:

$('.navbar-toggle').on('click', function(){
    $($(this).attr('data-target')).slideToggle();
});

This brings back the basic functionality, but (in my case) the list is stuck shortly before it expands / collapses. Very curious if there will be a fix for this.

nosferatjr

I actually solved it by adding these lines

$("nav .dropdown").each(function(index, el) {
    $(el).on("click", function(){
        $(el).find(".dropdown-toggle").dropdown('toggle');
    });
});

Hope it helps!

titoballon

add this to your css:

.collapse:not(.show){
display: inline;
}