Angular UI-Select in UI-Grid?

Question

I feel like I'm beating my head against a wall.

Anyone have an example of using ui-select inside of ui-grid? (3.0)

I'm having the hardest time utilizing ui-select inside of ui-grid, as a cellTemplate, ie:

{ field: "Job.JobTitle", displayName: "Job Title", enableCellEdit: true, editableCellTemplate: '<ui-select ng-model="job.selected" theme="select2" style="width:100%;"><ui-select-match placeholder="Select a job...">{{$select.selected.JobTitle}}</ui-select-match><ui-select-choices repeat="job in jobs | filter: $select.search"><div ng-bind-html="job.JobTitle | highlight: $select.search"></div></ui-select-choices></ui-select>' }

Any chance anyone out there has an example of ui-select inside ui-grid?

Thanks!

John · Accepted Answer · 2014-12-01 00:59:08Z

6

So after hours upon hours of fighting with this, I found the problem!

ui-grid-cell CSS class has overflow:hidden. Which means that my ui-select was hiding BEHIND the lower cells.

What fun, what fun. Now to override that little PITA!

answered Dec 1, 2014 at 0:59

John

9712 gold badges9 silver badges25 bronze badges

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

1 Comment

Yogi Over a year ago

.ngCell thats the exact css class to override. Worked like a charm. Thanks

Justin · Accepted Answer · 2015-05-27 00:36:32Z

5

Trick is

append-to-body="true"

But don't take it from me, take it from the best authority on this subject. Here is how its done.

http://brianhann.com/ui-grid-and-dropdowns/

answered May 27, 2015 at 0:36

Justin

3,4613 gold badges24 silver badges20 bronze badges

1 Comment

nfgf Over a year ago

Thanks, Justin. My ui-select dropdown list was behind the other elements of an Ionic list. append-to-body did the trick,

Collectives™ on Stack Overflow

Angular UI-Select in UI-Grid?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related