bootstrap 3 – collapse ‘jump’ behaviour

bootstrap 3 – collapse ‘jump’ behaviour

I am getting a weird behaviour when using bootstrap’s collapse feature. When collapsing and uncollapsing, the div presents a ‘jump’ behaviour.
This is shown in the following fiddle.
Here’s the code

Search Result

Solutions/Answers:

Solution 1:

The Jump in your collapse is due to .well class CSS.

.well class adds margin-bottom: 20px; which causes jump when the collapse gets display:none property. And the padding of .well also plays role in this jump.

To make it collapse smoother, add the .well class inside the .collapse DIV
as shown below, and this CSS.


To escalate it quickly, .well class adds margin-bottom, padding, and min-height which causes jump, as it affects the box-model on display:none.

.refine-search-collapse-container .well {
  margin-bottom: 0;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>


<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#refine-search" aria-expanded="false" aria-controls="refine-search">
  Refine Search
  <span class="caret"></span>
</button>

<div class="collapse refine-search-collapse-container" id="refine-search">
  <form class="form-horizontal well">
    <div class="form-group">
      <div class="col-sm-6">
        <select class="form-control">
          <option value="">ad</option>
          <option value="">sfsd</option>
          <option value="">sdf</option>
          <option value="">sf</option>
          <option value="">sdf</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-6">
        <select class="form-control">
          <option value="">Blah1</option>
          <option value="">Blah2</option>
          <option value="">Blah3</option>
          <option value="">Blah4</option>
          <option value="">Blah5</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-6">
        <input type="number" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-6">
        <select class="form-control">
          <option value="">Yes</option>
          <option value="">No</option>
        </select>
      </div>
    </div>
  </form>
</div>

<div class="">
  <h3>Search Result</h3>
</div>

Solution 2:

I have updated your fiddle go through below link may be it can help you.

Related:  How to change the bootstrap multiselect label instead of selected all?

JSFiddle

Put your well class with form element and just add below CSS

CSS Code-

.well{
  margin-bottom:0px;
}

Solution 3:

You shouldn’t have any padding or margins on the collapsible element. This is what is causing the jump effect.

ie: in your case, it has additional classes which add padding and margins.

<div class="refine-search-collapse-container well collapse">

If you want to preserve all the current styles such as .well etc, it’s best to wrap your existing collapsible element around another tag and make the parent div the collapsible element,

See updated example:

In your case you would need a .clearfix on the collapsible element since it has a child that will overflow because of the .well class

http://jsfiddle.net/vuk1dbag/19/

Solution 4:

Hi this is your fiddle after update. Your code should be look like:

<div class="container">
  <div class="row">
    <div class="col-xs-12">

      <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#refine-search" aria-expanded="false" aria-controls="refine-search">
        Refine Search
        <span class="caret"></span>
      </button>
    </div>

    <div class="clearfix"></div>

    <div class="col-xs-12">
      <form class="form-horizontal collapse" id="refine-search">
        <div class="form-group">
          <div class="col-sm-6">
            <select class="form-control">
              <option value="">ad</option>
              <option value="">sfsd</option>
              <option value="">sdf</option>
              <option value="">sf</option>
              <option value="">sdf</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-6">
            <select class="form-control">
              <option value="">Blah1</option>
              <option value="">Blah2</option>
              <option value="">Blah3</option>
              <option value="">Blah4</option>
              <option value="">Blah5</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-6">
            <input type="number" class="form-control">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-6">
            <select class="form-control">
              <option value="">Yes</option>
              <option value="">No</option>
            </select>
          </div>
        </div>
      </form>
    </div>

    <div class="clearfix"></div>

    <div class="col-xs-12">
      <h3>Search Result</h3>
    </div>
  </div>
</div>

Solution 5:

There should not be any padding-bottom or padding-top to those div with class .collapse. That padding makes the Jump effect

Related:  Basic centering elements in adaptive row class in bootstrap

Solution 6:

This is an old bug that won’t be fixed in version 3. Set the margin-bottom of the well to 0. You may have to set the top and bottom margins and/or padding of other elements to 0 also depending on where they are relative to what you’re collapsing (in this case the well). You’ll just have to play around, unfortunately.

Also, if you are collapsing/expanding several elements close to each other, and want to adjust the space between them after setting margins and/or padding to 0 (which will cram everything together), a hack that works (but which I despise using) is to put an empty div between them and adjust the top and bottom padding or margins of that instead.

Here’s the issue on Github: https://github.com/twbs/bootstrap/issues/12093

References