CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Pieter VDE
Pieter VDE

Reputation: 2235

Bootstrap accordion with chevron icon has a little bug

Thanks to this SO question and this SO question, I have been able to create a Bootstrap accordion with

Now, I noticed a little bug when expanding/collapsing a panel: the content on the far right side of the expanding/collapsing panel is pushed to the left a little during the animation, and suddenly jumps to its normal position when it's complete.
I'm guessing it has this behaviour because of the float attached to the chevron icon.

I've created a JSFiddle demonstrating the problem, and here's the code:

HTML:

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
             <h4 class="panel-title">Item #1</h4>

        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">Content #1</div>
        </div>
    </div>
    ...
</div>

CSS: (did I mention I used a pure CSS solution?)

.panel-heading.accordion-toggle:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: right;
    position: relative;
    bottom: 23px;
    font-size: 15pt;
    color: grey;
}
.panel-heading.accordion-toggle.collapsed:after {
    content:"\e080";
}

I'm sure it's just a little thing, but I can't seem to find it.

Upvotes: 1

Views: 1430

Answers (1)

miron
miron

Reputation: 1450

How about setting the icon position: absolute; and the parent .parent-heading position: relative; ? By that you don't affect any elements which may result in unpredictable behaviour.

.panel-heading{
    position: relative;
}

.panel-heading.accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family:'Glyphicons Halflings';
    /* essential for enabling glyphicon */
    content:"\e114";
    /* adjust as needed, taken from bootstrap.css */
    float: right;
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 15pt;
    /* adjust as needed */
    color: grey;
    /* adjust as needed */

}

Here's the modified fiddle.

Upvotes: 2

Related Questions