CODEWITHSUNDEEP
angularjsangular-ui-grid
AnneMz
AnneMz

Reputation: 484

Dropdown menu in angular ui-grid column not dropping down

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.

Upvotes: 0

Views: 6137

Answers (2)

Adam K
Adam K

Reputation: 21

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>

Upvotes: 2

AnneMz
AnneMz

Reputation: 484

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.

Upvotes: 3

Related Questions