The user interface selection drop-down option does not appear above the panel body

I have a fixed height panel with overflow set to auto. Inside this panel, I use ui-select.

When you click / open a selection window, it hides behind the panel footer, and the user needs to scroll down to view. Is it possible to display the ui-select screen outside a field with a fixed height with a set of overflow.

<div class="panel-body" style="height:100px;overflow:auto;"> <div class="col-md-12"> <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;"> <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match> <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}"> <div ng-bind-html="person.name | highlight: $select.search"></div> <small> email: {{person.email}} age: <span ng-bind-html="''+person.age | highlight: $select.search"></span> </small> </ui-select-choices> </ui-select> </div> 

Plunker link

+5
source share
1 answer

You can use overflow: visible on .panel-body , as in this PLUNKER

+3
source

Source: https://habr.com/ru/post/1207208/


All Articles