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.
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...
<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>