search

angular-ui / ui-select

AngularJS-native version of Select2 and Selectize
MIT License
3.26k stars 1.82k forks source link

Dropdown options are hiding down, if there is no room space. #234

Closed DineshkumarT closed 7 years ago

DineshkumarT commented 9 years ago

roomspace_issue

Normal dropdowns are displaying the options over the debugging tools,but the ui-select dropdown is displaying the options under the debugging tools.

Not able to select the options in this scenario.

danielfalk commented 9 years ago

This is an issue because select2 will put the drop above the field if there's not room below. This is particularly bad when this field is either near the bottom of the page or in a div that has overflow: auto, and the drop disappears and the container must be scrolled to access it.

sedovalx commented 9 years ago

+1 for putting the drop above

mattcasey commented 9 years ago

I'd even be happy with an option to set it, rather than have it auto-detect. Duplicate issue: https://github.com/angular-ui/ui-select/issues/206

jimmywarting commented 9 years ago

@mattcasey This is not really a dublicate issue of #206... #206 is more about where in the DOM tree where the select should be appended. (Wish is also reported in #41)

This issue describes how the options flips side (if it should be above or below the input) think of this like if the select was the last child of <body> and the select is at the bottom of the viewport

drewbeck commented 9 years ago

+1 for drop above. Default browser select controls do it, anything that wishes to replace that functionality should also do it!

I'm a ui-select2 user who is aching to be able to switch to ui-select, and this is definitely a requirement.

dtomaszewski commented 9 years ago

+1

Oceanswave commented 9 years ago

+1

Jefiozie commented 7 years ago

I think this is already resolved in a version. Added a screenshot what i have.

image

@user378230 , still a enhancement (maybe i'm missing something here) or can we close it?

user378230 commented 7 years ago

Not sure, this is a old issue though, so we'll close it. I'm sure someone will shout if they have a problem still.

mwpowellhtx commented 7 years ago

This is still an issue, unless I missed a fix for it somewhere along the way. In my case I have a selectmenu within a modal dialog.

image

gonzaloamadio commented 7 years ago

I have the same issue, when I want to select, it goes behind my next item.

image

And heres the code:

    <div class="list">
          <div class="item item-divider">
          Completar los datos para estacionar
          </div>

          <div class="item" >
            <!--<i class="icon ion-mic-a"></i>-->
            Calle seleccionada
            <span class="item-note">
            {{estacionar.calle | json}}
            </span>
          </div>

          <div class="item" >
            Calle
            <span class="item-note">
              <ui-select ng-model="estacionar.calle" theme="selectize" ng-disabled="disabled" style="width: 300px;" title="Calles">
                  <ui-select-match placeholder="Escribir calle...">{{$select.selected.name}}</ui-select-match>
                  <ui-select-choices repeat="calle in calles | filter: $select.search">
                      <span ng-bind-html="calle.name | highlight: $select.search"></span>
                      <small ng-bind-html="calle.id | highlight: $select.search"></small>
                  </ui-select-choices>
              </ui-select>
            </span>
          </div>        
</div>