Issue on Smooth Toggle Sliding (Up)

Question

Can you please take a look at this example and let me know why I am not able to have a smooth slide up in my layout? I mean there is a jump when the slide catches the inner well(.login).

<div class="container">
    <div class="row top">
        <div class="well well-sm col-md-2 col-md-offset-10"><a id="login">Login</a> | Register <i class="glyphicon glyphicon glyphicon-info-sign pull-right"></i>
           <div class="well login"></div>
        </div>
    </div>
</div>

<script>
$("#login").click(function () {
    $(".login").slideToggle();
});
</script>

and the CSS is :

.login {
    display:none;
    -webkit-transition: max-height 0.6s ease-out;
    -moz-transition: max-height 0.6s ease-out;
    -o-transition: max-height 0.6s ease-out;
    transition: max-height 0.6s ease-out;
}

Thanks

Answer 1

The issue you are seeing is caused by a min-height style in the bootstrap.css. The min height is keeping the well from collapsing past 20px. When the well expands it actually immediately displays a height of 20px. However, this is odd behavior is really only noticeable while its collapsing.

.well {
  min-height: 20px;  <--- THIS STYLE
  padding: 19px;
  margin-bottom: 20px;
  background-color: @well-bg;
  border: 1px solid @well-border;
  border-radius: @border-radius-base;
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
  blockquote {
    border-color: #ddd;
    border-color: rgba(0,0,0,.15);
  }
}

You can specify the min-height with a more specific selector or applying a class to the well.

I simply applied a more specific selector to the well so it overrides the selector from the BootStrap.css.

div .well
{
 min-height:initial;   
}

http://jsfiddle.net/Ej72d/

While that works, I suggest applying another class to the well div called wellNoMinHeight

.well.wellNoMinHeight
{
 min-height:initial;   
}

http://jsfiddle.net/TM2J3/