Bootstrap Responsive Collapsed Submenu has fixed height on first collapse

Question

This problem can be exhibited in all (that I know of) Twitter Bootstrap versions. So, I have a navbar and when the screen is smaller, it becomes a collapsable tray. This behaviour can be seen on the bootstrap demo site. I also have submenus, which appear collapsed on the initial navbar expansion. The problem is, on the first collapse, the collapsable gets an explicit height set. If you close and expand again, the collapsable gets a height:auto;

So, when I click a submenu item, the dropdown is expanded, but it overflows due to the height being explicitly set.

My attempted solution was adding:

$(function() {
  $('.nav-collapse').on({
    shown: function() {
      $(this).css('height', 'auto');
    },

    hidden: function() {
      $(this).css('height', '0px');
    }
  });
}); 

This doesn't seem to affect it at all, I've deleted that code and it still has the same effect. If a JS Fiddle would help, I'd be happy to provide one, but you can see all of this on the Bootstrap demo site.

Thanks in advance, Charles.

Answer 1

It bothered me a little, and after some searching, I found that the problem can be solved by adding the .collapse class to the .nav-collapse element.

Working demo (jsfiddle)

One of those time when we just say Meh.. I should have followed the doc to the letter (see Responsive navbar):

<div class="nav-collapse collapse">
    <!-- .nav, .navbar-search, .navbar-form, etc -->
</div>

---

For posterity :

Found out thanks to this issue : https://github.com/twitter/bootstrap/issues/3788

I'm not sure if it really is related, but my debugging showed the problem on the first transition height resetting anyway (source) :

$.support.transition && this.$element[dimension](this.$element[0][scroll])