Angular UI: Button drop down inside accordion: how to make this work correctly?

[Andrew Martin]

Hi!

I have the following simple code:

<div ng-controller="TestCtrl">

  <accordion close-others="false">

    

<accordion-group heading="group1">

      <div class="btn-group" ng-class='{open: open}'>

        <button class="btn">Action</button>

        <button class="btn dropdown-toggle" data-toggle="dropdown" ng-click='open=!open'><span class="caret"></span></button>

        <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li class="divider"></li>

            <li><a href="#">Separated link</a></li>

        </ul>

      </div>

    </accordion-group>

    

    <accordion-group heading="group2">

      content...

    </accordion-group>  

  

</accordion>    

</div>

If I open the first group and then the drop down, it gets cut by the accordion. Is there a way to allow it to overflow?

~Andrew

[Andrew Martin]

Ok, so a simple solution to the problem is changing the accordion-group template like this:

<div class="accordion-group">

  <div class="accordion-heading" ><a class="accordion-toggle" ng-click="isOpen = !isOpen" accordion-transclude="heading">{{heading}}</a></div>

  <div class="accordion-body" collapse="!isOpen" ng-class="{open:isOpen}">

    <div class="accordion-inner" ng-transclude></div>  </div>

</div>

And adding the following CSS:

.accordion-body.open:hover

{

    overflow: visible;

}

This way it only overflows if it's open and the user hovered. I hope there is a better way doing this, but for now it's good enough for me.

~Andrew

[Andres Arellano]

This solution worked better for me:

.accordion-body.in:hover { overflow:visible; }

Taken from http://stackoverflow.com/questions/10959068/twitter-bootstrap-accordion-and-button-dropdown-overflow-issue