Fluentui: Dropdown: Display above if not enough space below

[nguyentoantuit]

Currently, I have problem with dropdown that if there is less space at bottom the dropdown selections is still shown at bottom which is quite hard for end-user selects the correctly option that he/she want. So it is really handy if the dropdown options show at the top of dropdown if there is less space at bottom.

Thanks,
Toan

[Jahnp]

Thanks for reporting this @nguyentoantuit. I would argue this is a real bug, not just an improvement, as dropdowns don't seem to reposition at all, no matter how small the container becomes. This can make the menu impossible to navigate in some scenarios:

The good news is that this should be somewhat straightforward to fix since the underlying Dropdown menu is a Callout.

[Jahnp]

@micahgodbolt, thoughts? Is this something you could take a look at?

[micahgodbolt]

We initially had dropdown displaying to the side if not enough space below. I believe it was a design decision to force it below (i.e. drop"DOWN"). I'm fine with a change as long as it passed by design.

[Jahnp]

Thanks for the quick response! Ha, I always assumed the "down" part was just a colloquialism, since afaik most native menus like this will respond to screen position, including "dropping up" if needed.

That said, do you remember who made that design decision so we can check with them? I checked with @betrue-final-final and he agrees they should reposition if there isn't enough space to display, say, 3 items.

[micahgodbolt]

No, I don't have a strong recollection. @David [e-mail] might remember a bit better. I can say that I was the one to make the change back in August.

https://github.com/OfficeDev/office-ui-fabric-react/pull/2383
[https://avatars0.githubusercontent.com/u/1434956?s=400&v=4]https://github.com/OfficeDev/office-ui-fabric-react/pull/2383

Dropdown: Support custom widths by micahgodbolt · Pull ...https://github.com/OfficeDev/office-ui-fabric-react/pull/2383
office-ui-fabric-react - React components for building experiences for Office and Office 365.
github.com

Sent from Outlookhttp://aka.ms/weboutlook

---

From: Peter Jahn [e-mail]
Sent: Friday, January 19, 2018 11:52 AM
To: OfficeDev/office-ui-fabric-react
Cc: Micah Godbolt; Mention
Subject: Re: [OfficeDev/office-ui-fabric-react] [Improvement] Dropdown selections should display above the TextField if there is no space at bottom (#3719)

Thanks for the quick response! Ha, I always assumed the "down" part was just a colloquialism, since afaik most native menus like this will respond to screen position, including "dropping up" if needed.

That said, do you remember who made that design decision so we can check with them? I checked with @betrue-final-finalhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fbetrue-final-final&data=02%7C01%7Cmgodbolt%40microsoft.com%7Cb9747aaee02747ebb24308d55f763402%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636519883642995443&sdata=1audoK818xyPdP9ysetVHqats3fpxobSQPs14QJeuDg%3D&reserved=0 and he agrees they should reposition if there isn't enough space to display, say, 3 items.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FOfficeDev%2Foffice-ui-fabric-react%2Fissues%2F3719%23issuecomment-359071677&data=02%7C01%7Cmgodbolt%40microsoft.com%7Cb9747aaee02747ebb24308d55f763402%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636519883642995443&sdata=BE5f7VJD%2Ftnp%2FkgzBmjyv3p7UNdnjih9qawlfDN4nyc%3D&reserved=0, or mute the threadhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FABXlTAP_QeJh8ePIjiTU5zzN40qTR-a2ks5tMPKJgaJpZM4RdjQG&data=02%7C01%7Cmgodbolt%40microsoft.com%7Cb9747aaee02747ebb24308d55f763402%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636519883642995443&sdata=5K1867tp%2BuYUoORLwtIZosYayEjwqX3cVlXBck8FWcw%3D&reserved=0.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Fabric React!

[Jahnp]

Hey @micahgodbolt , just checking in, would you be able to look into this change? We checked with several designers and the behavior @nguyentoantuit describes is definitely expected. Thanks!

[micahgodbolt]

added this to our backlog. Will try to get some dev resources on it once the 6.0 work settles down.

[florianwachs]

Cool thanks!

[dzearing]

@joschect Is this a regression?

[dzearing]

https://codepen.io/dzearing/pen/eKvjKN

[micahgodbolt]

@dzearing this was an intentional change, though not fully thought through.

It appears that default browser behavior for selects is to either render above (firefox/chrome) if there isn't enough space,

or to render on top of the select (Edge) with the bottom edge at the bottom of the page.

[micahgodbolt]

So before making this change, we need to determine what is the correct behavior we want to model.

[micahgodbolt]

Waiting until the dropdown conversion is finished (almost done). Then will update this if it hasn't already been done.

[dzearing]

@micahgodbolt I believe conversion is complete; are you going to come back here or should we assign to Cliff or Jon?

[micahgodbolt]

I can do it