Sunday, September 18, 2016

Jumpy Accordion (Collapse) in Bootstrap

Today I found out that my bootstrap 4 accordion (collapse) is little bit jumpy at the moment it's hidden. A little research on google took me to this link: https://github.com/twbs/bootstrap/issues/12093. Fortunately, someone pointed out a solution to this problem.

It turns out to be a padding error. The problem is happened when you have padding on the collapse target div.
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Accordion Button
  </button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
So, if you want to add some padding at collapsed target,  you should put the CSS code into class "card" (refer to example code above). If you add into class "collapse" instead, you'll have "jumpy" accordion like mine.

Related Articles

2 comments:

  1. How to login into the casino in 2021
    Here is how to do this: Step 1. Go to the website. · https://vannienailor4166blog.blogspot.com/ Click 바카라 사이트 on the “Login” link on the right-hand side. · Click sol.edu.kg on the “Login” button to enter a live chat number. gri-go.com · Enter https://septcasino.com/review/merit-casino/ the

    ReplyDelete
  2. Bet365 Casino & Promos 2021 - JTM Hub
    Full www.jtmhub.com list of Bet365 Casino & Promos · Up to £100 in wooricasinos.info Bet Credits for new customers at https://febcasino.com/review/merit-casino/ bet365. Min deposit apr casino £5. Bet Credits available for use upon worrione settlement of bets to value of

    ReplyDelete