Dropdown menu in angular ui-grid column not dropping down

Question

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.

AnneMz · Accepted Answer · 2015-05-18 16:42:56Z

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.

answered May 18, 2015 at 16:42

AnneMz

4841 gold badge6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

c0bra Over a year ago

Interesting. I was just trying this out and was able to get it working without the overflow css: plnkr.co/edit/baiBVqc8DiWG17kztkt5?p=preview

AnneMz Over a year ago

That is odd. I notice my script include list is different than yours - it's code<script src="Scripts/angular.min.js"></script> <script src="Scripts/ui-bootstrap.min.js"></script> <script src="Scripts/ui-bootstrap-tpls.min.js"></script> <script src="Scripts/angular-ui-router.min.js"></script> <script src="Scripts/angular-local-storage.min.js"></script> <script src="Scripts/ui-grid-unstable.min.js"></script> <script src="app/app.js"></script>code;

Adam K · Accepted Answer · 2016-04-15 08:15:24Z

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>

answered Apr 15, 2016 at 8:15

Adam K

211 bronze badge

Collectives™ on Stack Overflow

Dropdown menu in angular ui-grid column not dropping down

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related