html - Bootstrap accordion with chevron icon has a little bug -


Thank you for doing this and I, in creating a bootstrap accordion with

  • Enabled;
  • The chevron arrow on the right side pointing to the position of a panel

    Now, I have seen a small bug when a panel expands / expires: the animation The extension of the collapse / collapse of the right side of the panel is pushed for a while during animation, and when it is complete, it suddenly jumps into its normal condition.
    I think this behavior is due to this float

    HTML:

    & lt; Div class = "panel-group" id = "accordion" & gt; & Lt; Div class = "panel-panel-default" & gt; & Lt; Div class = "panel-title accordion-toggle" data-toggle = "collapse" data-parent = "# accordion" data-target = "# collapseOne" & gt; & Lt; H4 class = "panel-title" & gt; Item # 1 & lt; / H4 & gt; & Lt; / Div & gt; & Lt; Div id = "collapseOne" class = "collapse in panel-fall" & gt; & Lt; Div class = "panel-body" & gt; Content # 1 & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; ... & lt; / Div & gt;

    CSS: (Did I mention that I have used pure CSS solution?)

      .panel- Heading.accordion-toggle: after {font-family: 'glyphicons halflings'; Content: "\ e114"; float right; Status: Relative; Bottom: 23px; Font size: 15pt; Color: Gray; } .panel-heading.accordion-toggle.collapsed: {content: "\ e080" after; }  

    I'm sure this is just a small matter, but I do not think so.

How to set icon status: Absolute; And parents Parents-Title Status: Relative; ? This does not affect any elements that may result in unexpected behavior.

  .panel- title {status: relative; } .panel-heading.accordion-toggle: after the {/ * symbol for "opening" panels * / font-family: 'Glyphicons Halflings'; / * Glyphicon * / Required to enable content: "\ e114"; / * Adjust as needed, taken from bootstrap.css * / float: Correct; Status: Completed; Down: 5px; Correct: 5px; Font size: 15pt; / * Adjust as needed * / Color: Gray; / * Adjust as needed * /  

}


Comments

Popular posts from this blog

sqlite3 - UPDATE a table from the SELECT of another one -

c# - Showing a SelectedItem's Property -

javascript - Render HTML after each iteration in loop -