javascript - Bootstrap Responsive Collapsed Submenu has fixed height on first collapse -
this problem can exhibited in (that know of) twitter bootstrap versions. so, have navbar , when screen smaller, becomes collapsable tray. behaviour can seen on bootstrap demo site. have submenus, appear collapsed on initial navbar expansion. problem is, on first collapse, collapsable gets explicit height set. if close , expand again, collapsable gets height:auto;
so, when click submenu item, dropdown expanded, overflows due height beingness explicitly set.
my attempted solution adding:
$(function() { $('.nav-collapse').on({ shown: function() { $(this).css('height', 'auto'); }, hidden: function() { $(this).css('height', '0px'); } }); });
this doesn't seem impact @ all, i've deleted code , still has same effect. if js fiddle help, i'd happy provide one, can see of on bootstrap demo site.
thanks in advance, charles.
it bothered me little, , after searching, found problem can solved adding .collapse
class .nav-collapse
element.
working demo (jsfiddle)
one of time when meh.. should have followed doc letter (see responsive navbar
):
<div class="nav-collapse collapse"> <!-- .nav, .navbar-search, .navbar-form, etc --> </div>
for posterity :
found out issue : https://github.com/twitter/bootstrap/issues/3788
i'm not sure if related, debugging showed problem on first transition height resetting anyway (source) :
$.support.transition && this.$element[dimension](this.$element[0][scroll])
javascript css twitter-bootstrap
No comments:
Post a Comment