Dropdown should open UP instead of DOWN, when there is not enough space to render fully

[slavinskas]

When there is not enough space for dropdown to render fully, it should be rendered to the top of the element, as it is default behaviour for select2.

[dimirc]

@slavinskas can explain a little more about this? maybe a picture if its something graphical that you refer to

[zackarychapple]

@dimirc similar to when you open a context window in chrome with right click. The direction it builds from the location of your mouse differs based on the draw height and the amount of space to the edge of the screen. If you do not have any space on a screen or the select is at the bottom of the page it should draw the elements up instead of down. is my understanding correct @slavinskas ?

[slavinskas]

@zackarychapple yes, it's exactly what I meant.

[zackarychapple]

I would like to expand on the requirement to also offset right and left as a stretch goal.

[burza]

+1 for this feature, how far is the implementation?

[DineshkumarT]

+1

On Thursday, October 2, 2014, Gregor Swatek [email protected]
wrote:

+1 for this feature, how far is the implementation?

—
Reply to this email directly or view it on GitHub
#148 (comment)
.

[cheahkhing]

+1 on this, this is an extremely helpful feature.

[meirb]

+1

[edsioufi]

+1

[Maxyme]

+1

[BadgerBadgerBadgerBadger]

+1

Any progress?

[ninjasun]

+1

[kedarbe]

+1

[seiyria]

+1 - I would enjoy being able to also force it to render upwards always, if possible.

[onemenny]

+1

[nameetpai]

+1

[andywunderlich]

+1

[wald-tq]

+1

[FFelling]

This would definitely be nice to have.

This could also be a solution for the list falls behind overflow:hidden or overflow:auto containers #591.
"move drop down to base of to stop it from being cut off (drop.js) #591"

[seiyria]

Might want to update the milestone here if this hasn't been addressed yet.

[fxck]

do want

[JeromeLam]

I've created a PR with code that adds an up direction depending on how much vertical space is left for rendering. This works well for my local build.

Feel free to try it out on your own builds and upvote the PR if it works for you!

[gitnik]

👍

[cyrilf]

👍

Just a simple question: As this issue is 9 months old, should I

• wait hoping that you're going to fix/merge the PR soon
• fork this repo (which I really don't want..)

?

Thanks!

[JeromeLam]

@cyrilf brianfeister self-assigned PR #836 about 10 days ago, so it may get merged soon. Maybe you can leave a comment in the PR itself to generate more activity.

[cyrilf]

Merged! Thanks again @JeromeLam (and @brianfeister ) 😉

[SerjoPepper]

@JeromeLam, hi
offsets calculated wrong when I have scroll on "body" element instead of "html"

offset.top + offset.height + offsetDropdown.height > $document[0].documentElement.scrollTop + $document[0].documentElement.clientHeight

should be replaced with

offset.top + offset.height + offsetDropdown.height > $document[0].documentElement.scrollTop + $document[0].body.scrollTop + $document[0].documentElement.clientHeight

[rachellej]

Same issue as @SerjoPepper -- and btw thanks for commenting the issue

[kwantopia]

Looks like if you use ui-select inside directives, on Chrome browsers the dropdown always goes up instead of dropping down.

[JoshSGman]

@kwantopia I'm having the same issue

[danduh]

Is there any option/setting to disable this feature?

[ManuelPutallaz]

same question than @danduh : Is there any option/setting to disable this feature?

[greenwebdev]

Seeing the same issue as @kwantopia in Chrome, doing my head in. Any suggested fix?

[hyrumwhite]

Would love the ability to force it to always open down. Currently it's opening up no matter what I do.

[vladferix]

@hyrumwhite +1

[oshai]

@hyrumwhite +1

[bunsenmcdubbs]

@hyrumwhite +1

[calwi]

Same issue here, inside a modal, it always opens up and goes slightly out of the window. Would like to force 'direction-down'.

[sdir456]

+1

[pgeez]

with @hyrumwhite and @calwi , please add the ability to force 'direction-down'

[anonomis]

@hyrumwhite +1

[tandrianoff]

with @hyrumwhite and @calwi and @pgeez I also want to force either direction-down or direction-up.

[jraguilo]

I also really need the option to force "direction-down".

[dimirc]

Related to #1212

[alexpeattie]

Just for anyone who found this issue looking for a way to force dropdowns to go down, this is now possible with #1213 ☺️ - you just need to add position='down' to your <ui-select-choices> element or globally:

yourApp.config(function(uiSelectConfig) {
  uiSelectConfig.dropdownPosition = 'down';
})

[sbedulin]

@alexpeattie 👍 thanks

[soichih]

@alexanderchan Thanks.

I had to use this option to force the choice element to bottom because ui-select currently does not provide scrolling capability for ui-select-multiple. If user enters tons of items, and ui-select-match element becomes too tall to be shown without scrolling the page, choice element could be displayed off-view (at the top of the match element).

It will be nice if there is a native way to set the maximum height for ui-select-match element..

[ArulselviArangasamy]

select2 dropdown position want to down only display