0

I am trying to insert a dropdown menu into a column in ui-grid. Each menu item will have an ng-click attached.

I am using ui-grid-unstable.min.js because pagination doesn't seem to work in ui-grid-stable.min.js

The button appears in the grid and registers that it has been clicked on (the open class is added to it) but it doesn't dropdown.

My ui-grid columndef look like this:

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

The cellTemplate code comes from the "Dropdown on Body" button example https://angular-ui.github.io/bootstrap/ It looks like this:

<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 is included in my app module and the .css and .js files are included in my index.html

I looked at this: Angular UI Grid: How to create a pre-populated dropdown menu for column filtering and some others but they seem to deal with creating bound selects (not a drop-down menu) and searched other similar items on stack overflow but I cannot find one that solves my problem of the button menu not even dropping down.

Community
  • 1
  • 1
AnneMz
  • 484
  • 1
  • 6
  • 16

2 Answers2

3

Further research shows it was because the class on the ui-grid cell is overflow hidden. By adding a class with overflow:visible the columnDef for the cell I was able to resolve the issue.

AnneMz
  • 484
  • 1
  • 6
  • 16
  • Interesting. I was just trying this out and was able to get it working without the overflow css: http://plnkr.co/edit/baiBVqc8DiWG17kztkt5?p=preview – c0bra May 18 '15 at 19:04
  • That is odd. I notice my script include list is different than yours - it's `code` `code`; – AnneMz May 19 '15 at 01:40
2

Adding dropdown-append-to-body near the uib-dropdown or dropdown directive helps with overflow:hidden problem. Also inside the ui-grid cell.

<div class="btn-group" uib-dropdown dropdown-append-to-body>
...
</div>
Adam K
  • 21
  • 1