CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
J. Scull
J. Scull

Reputation: 319

Bootstrap collapse jumpy transition, no padding/margins

I am trying to create a clean and smooth drop down which expands when a button is clicked, however I am getting a jumpy sort of transition when the menu drops down. I have come across this bug before when using padding and/or margins. However this time I've made so to not use margins or padding yet I still get the bug.

These are screen grabs of the jump that occurs. Vertically the loading is fine and all the elements collapse downwards fine with no juttering however horizontally it does not load the whole UL of elements and jumps at the end. See pictures:

during render after render

So you can see what is occuring I will now attach relevant code. (Be warned my code is a bit all over the place in this project.

HTML & CSS:

.unorderedList a{
  width:165px;
  border-top:0;
  border-bottom:0;
  padding:0;
  margin:0;
}
.unorderedList{
  list-style-type: none;
  border:1px solid grey;
  padding:0;
  padding-top:0px;
  text-align:right;
  position:absolute;
  top:65px;
}  
.settingsContainer{
  position:fixed;
  width:134px;
  top:10px;
  left:85%;
  margin:0;
  padding:0;
}   
.directionalMenu{
  position:absolute;
  top:0px;
  left:58%;
  margin:0;
  padding:0;
}    
.directionalMenu #textMap{
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
}
.directionalMenu #mapBut{
  width:79px;
}
<div class="settingsContainer">
  <div class="directionalMenu">
    <a href="/QMSv2/" class="btn btn-default" role="button"><span class="glyphicon glyphicon-home"></span></a>
    <a href="/admin/" class="btn btn-default" role="button"><span class="glyphicon glyphicon-cog"></span></a>
    <button type="button" class="btn btn-default btn-responsive" id="mapBut" data-toggle="collapse" data-target="#mapsList"><small><span style="vertical-align:middle" class="glyphicon glyphicon-triangle-bottom"></small>
    <a class="textMap">  Maps</a></span></button>
</div>
<div class="collapse" id=mapsList>
  <div>
    <ul class="unorderedList">
    {% for p in reset|getMapArr %}
      <li><a href="/QMSv2/{{p.slug}}/" class="btn btn-default border-fix">{{p.title}}</a></li>
    {% endfor %}
  </ul>
</div>
</div>

Thank you in advance for any help you may offer.

Upvotes: 0

Views: 1183

Answers (2)

J. Scull
J. Scull

Reputation: 319

I had set parent width smaller than child Div (containing the list being expanded) and this was causing the cut-off section during the expansion.

Increasing parent Div size to 1px larger than child fixed this issue and now the animation runs smooth.

Upvotes: 0

vivekkupadhyay
vivekkupadhyay

Reputation: 2891

Your unnecessary CSS is causing that misalignment and inappropriate behavior.

When you are using Bootstrap then you should use it accordingly that will save your time and effort both as:

Code Snippet:

.btn-container {
  padding: 100px 0 0 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="btn-group btn-container" role="group" aria-label="...">
  <a href="/QMSv2/" class="btn btn-default" role="button"><span class="glyphicon glyphicon-home"></span></a>
  <a href="/QMSv2/" class="btn btn-default" role="button"><span class="glyphicon glyphicon-cog"></span></a>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Maps
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="/QMSv2/{{p.slug}}/" class="">Lorem Ipsum</a>
      </li>
      <li><a href="/QMSv2/{{p.slug}}/" class="">Lorem Ipsum</a>
        <a href="/QMSv2/{{p.slug}}/" class="">Lorem Ipsum</a>
      </li>
    </ul>
  </div>
</div>

Upvotes: 1

Related Questions