Выпадающее меню в угловой столбец ui-grid не падает

Question

Я пытаюсь вставить раскрывающееся меню в колонку в ui-grid. Каждый пункт меню будет прикреплен к ng-click.

Я использую щ-ГРИД-unstable.min.js, потому что пагинация не похоже на работу в UI-грид-stable.min.js

Кнопка появляется в сетке и регистрирует, что это было нажал (добавлен открытый класс), но он не выпадал.

Мой пользовательский интерфейс сетки columndef выглядеть следующим образом:

this.gridOptions.columnDefs = [ 
{ field: 'Foo', displayName: 'Actions', cellTemplate: '/app/quiz/action.html', sortable: false } 
]; 

CellTemplate код приходит на примере кнопки "Выпадающее на теле" https://angular-ui.github.io/bootstrap/ Это выглядит следующим образом:

<div class="btn-group" dropdown dropdown-append-to-body> 
    <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle> 
    Dropdown on Body <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="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> 

ui.bootstrap включен в мой модуль приложения, а файлы .css и .js включены в мой index.html

Я посмотрел на это: Angular UI Grid: How to create a pre-populated dropdown menu for column filtering и некоторые другие, но они, похоже, имеют дело с созданием связанных выборок (а не выпадающего меню) и поиска других подобных элементов при переполнении стека, но я не могу найти тот, который решает мою проблему с меню кнопок, даже не опускающимся вниз.

Answer 1

Дальнейшие исследования показывают, что это связано с тем, что класс в ячейке ui-grid скрыт. Добавив класс с переполнением: видимый columnDef для ячейки, я смог решить проблему.

Answer 2

Добавление dropdown-append-to-body у uib-dropdown или dropdown директива помогает с overflow:hidden проблемой. Также внутри ячейки ui-grid.

<div class="btn-group" uib-dropdown dropdown-append-to-body> 
... 
</div>