Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap collapse has a jumpy transition

I have a problem with the transition of the bootstrap navbar. the collapse has a jumpy transition when the collapsing element has padding

I googled this issue and it seems that the problem is the padding:

.menu-menu-container{
    padding: 100px 30px 60px 30px;
    background-color: yellow;
}

in fact if i remove the padding from menu-menu-container element, the animation works well, and it is very smooth

this i my codepen > http://codepen.io/mp1985/pen/EyOJYE

How can I achieve the same result without this weird issue?

any help, suggestion or advice?

like image 263
mattia Avatar asked Aug 09 '16 17:08

mattia


2 Answers

The issue is caused by the padding of the container you are collapsing. It complicates the calculation of the height by collapse.js

Example:

HTML

    <div class="collapsible-div padding-values">
      // YOUR CONTENT
    </div>

CSS

.padding-values{
   padding: 20px 40px 30px;
}

this will be fixed if you move the padding to an inner container:

HTML

<div class="collapsible-div">
  <div class="new-container padding-values">
    // YOUR CONTENT
  </div>
</div>
like image 140
Jorge Díaz Avatar answered Sep 28 '22 07:09

Jorge Díaz


Its happening because of max-height of navbar-collapse class which is 340px use below code to handle it. http://codepen.io/rahulchaturvedie/pen/VjVOLa

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: none;
}
like image 30
Rahul Avatar answered Sep 28 '22 07:09

Rahul