Skip to content
This repository has been archived by the owner on Oct 2, 2019. It is now read-only.

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

Closed
DineshkumarT opened this issue Sep 29, 2014 · 11 comments
Closed

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

DineshkumarT opened this issue Sep 29, 2014 · 11 comments
Labels
PRs plz! type: enhancement

Comments

@DineshkumarT
Copy link

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
Copy link

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
Copy link

+1 for putting the drop above

@mattcasey
Copy link

I'd even be happy with an option to set it, rather than have it auto-detect. Duplicate issue: #206

@mattcasey mattcasey mentioned this issue Oct 15, 2014
Closed
@jimmywarting
Copy link
Contributor

@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

aeharding added a commit to aeharding/ui-select that referenced this issue Jan 16, 2015
@aeharding
Add drop.js to separate dropdown from the input.
3c36a54 
This allows the dropdown to flow outside of the area it's 'contained' within.
(For example, modals and scrollable content areas.)

Related issues: angular-ui#308, angular-ui#234, angular-ui#206, angular-ui#41... And more! :-D

Please do not merge this commit in its current state. :-)
@aeharding aeharding mentioned this issue Jan 16, 2015
Closed
@drewbeck
Copy link

drewbeck commented Feb 5, 2015

+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
Copy link

+1

aeharding added a commit to aeharding/ui-select that referenced this issue Feb 26, 2015
@aeharding
Add drop.js to separate dropdown from the input.
2409880 
This allows the dropdown to flow outside of the area it's 'contained' within.
(For example, modals and scrollable content areas.)

Related issues: angular-ui#308, angular-ui#234, angular-ui#206, angular-ui#41... And more! :-D

Please do not merge this commit in its current state. :-)
@Oceanswave
Copy link

+1

@Jefiozie
Copy link
Contributor

Jefiozie commented Nov 3, 2016

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
Copy link
Contributor

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
Copy link

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
Copy link

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>

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
PRs plz! type: enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests