title: Bootstrap Responsive Collapsed Submenu has fixed height on first collapse
body: <p>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 <code>height:auto;</code></p>
  
  <p>So, when I click a submenu item, the dropdown is expanded, but it overflows due to the height being explicitly set.</p>
  
  <p>My attempted solution was adding:</p>
  
  <pre><code>$(function() {
    $('.nav-collapse').on({
      shown: function() {
        $(this).css('height', 'auto');
      },
  
      hidden: function() {
        $(this).css('height', '0px');
      }
    });
  }); 
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks in advance,
  Charles.</p>