How to add a button in accordion header in bootstrap 3.0/bootstrap-ui?
angular-bootstrap, angular-ui-bootstrap, angularjs, twitter-bootstrap-3
Solution
Check my Plunker. There are some discussions about adding "dropdown-append-to-body" on angular.ui github issues. But till then this should do the trick:
.panel-group .panel {
overflow: visible;
}
Also instead of `float:right;`, you can use `pull-right` class from bootstrap. Button groups also have classes for sizing such as `btn-group-xs` `btn-group-sm`. You should check the bootstrap components.
Problem
I am trying to add a button to the accordion that has a dropdown menu but it doesn't seem to be working a: 1) button is too big so it goes past the accordions header. 2) The dropdown menu ends up inside the accordion header/group and not on top of everything else. What is the best way to fix these? I want The following is my code for the accordion group: ``` <accordion-group is-open="true"> <accordion-heading> <div class="btn-group" style="float:right;"> <button type="button" class="btn btn-info">Info</button> </div> </accordion-heading> </accordion-group> ``` This post is similar, but I want the buttons to be on the right of the header instead of being right next to the text, which is why I have a float:left. Angular UI accordion with buttons in the header part