How to add a button in accordion header in bootstr

Question

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

Answer 1

s.alem's has a great example above, but when I converted it to angularjs 1.3 I ran into problems.

Mainly, I noticed that non-pulldown buttons with the applied $event.stopPropagation() in the ng-click kept reloading the page when it was clicked.

After playing around a little further, I realized that since the pulldown buttons worked fine, why not treat the regular buttons like pulldown buttons where needed. The solution was adding the two attribute directives (dropdown,dropdown-toggle) from the pulldown version and place them into a regular button group respectively.

I used s.alem's example and modified it to 1.3 and ui.bootstrap 0.12 and made a bunch of samples with comments in the accordion body. I hope this helps. I still would like to use normal buttons in 1.3.x without using pulldown buttons, but for now this works...

Here is my plnkr code

<div class="pull-right btn-group btn-group-xs" dropdown>
  <button type="button" class="btn btn-success btn-xs" dropdown-toggle ng-click="mdc.clickToAdd();$event.stopPropagation();">Good</button>
  <button class="btn btn-danger btn-xs" ng-click="mdc.clickToAdd();$event.stopPropagation();">bad</button>
</div>

Answer 2

My solution:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
        <div class="row">
            <div class="col-lg-2">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Titel
                    </a>
                </h4>
            </div>
            <div class="col-lg-10">
                <button class="glyphicon glyphicon-pencil pull-right"></button>
            </div>
        </div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
            <h1>Inhalt</h1>
        </div>
    </div>
</div>

Answer 3

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.