Semantic-ui-react: feat(Dropdown): open to side with most space left

Created on 21 Oct 2016 · 22Comments · Source: Semantic-Org/Semantic-UI-React

When you have a dropdown at the bottom of your viewport, it opens below. That way the content of the dropdown is off screen. In Semantic-UI the dropdown opens to the side where there is the most space left, so in this case it opens to the top.

This would be a great UX improvement, since now users often have to scroll further down when opening a dropdown.

enhancement help wanted

Source

dylankiss

👍13

Most helpful comment

Semantic UI uses HTML classes to trigger functionality in their modules. Semantic UI React provides a component API instead. Our component API provides both the HTML classes and necessary React component logic.

Instead of adding the className to the docs, we need to add the prop upward to the Dropdown:

<Dropdown upward />

We should also auto-apply this className when there is not enough room for the menu on the screen, just as we do for the Popup.

levithomason on 21 Apr 2017

👍3

All 22 comments

العرب حياة

tamernasr on 4 Dec 2016

I've added a specific class for direction on my project :v and changed myself the position on the CSS for those specific cases, but would be nice to have a automatic solution like in the Semantic-ui original dropdown

persocon on 9 Mar 2017

Agreed. This issue is labeled for help wanted and PRs are welcome.

levithomason on 12 Mar 2017

I also need this feature.
Was just looking at the code, but no idea where to fix this.
In semantic-ui this was a quite easy fix:
https://github.com/Semantic-Org/Semantic-UI/commit/04d65e7483d1ac935ea9bdbb44996a4d0b876857

henri-hulski on 9 Apr 2017

With floating className='upward' it actually works already and looks quite ok.
Without floating the round corners are only on the bottom which looks a little stange. They should be on the top.
With floating it's not really floating, but looks better as it has round corners all around.

henri-hulski on 9 Apr 2017

👍2 😕1 🎉1

This should go to the documentation for "className", also listing the ones that we can use (ex: icon, upward)

cguedes on 21 Apr 2017

Instead of adding the className to the docs, we need to add the prop upward to the Dropdown:

<Dropdown upward />

We should also auto-apply this className when there is not enough room for the menu on the screen, just as we do for the Popup.

levithomason on 21 Apr 2017

👍3

@levithomason 100% agree with you.

cguedes on 21 Apr 2017

Great, I'm halfway through a feature branch already for adding this prop :) PR coming soon.

Initially, it will only be set manually. It will take another PR to auto apply the className. Would be great to have someone pick that up.

levithomason on 21 Apr 2017

👍1

Let me know, I think I can help.

cguedes on 21 Apr 2017

See https://github.com/Semantic-Org/Semantic-UI-React/pull/1603 for the new upward prop and 3 new doc examples. I will merge this on CI pass.

If you'd like to add a PR that auto applies this when the menu bottom will be offscreen, that would be fantastic. You can reference the Popup logic for one example implementation.

levithomason on 21 Apr 2017

@cguedes the upward PR is merged, you're all clear for a PR to add the auto-applied logic for this.

levithomason on 21 Apr 2017

Why not an orientation prop that can be upward|downward|leftward|rightward?

For example, take the upper right 3 dots menu in Google Chrome. Its menu items are rendered leftward instead of the "usual" rightward flow for a dropdown menu positioned to the left of the screen.

I couldn't find to do it except with the following workaround:

<Dropdown className="right" pointing={true}> <Dropdown.Menu> <Dropdown.Item>logout<Dropdown.Item> </Dropdown.Menu> </Dropdown>

romseguy on 18 Sep 2017

This sounds great. I would support a direction prop takes up, down, left, or right. We have a stubbed example we could use for this. Note, it does not work ATM and asks for PRs!

https://react.semantic-ui.com/modules/dropdown#dropdown-example-menu-direction

levithomason on 23 Sep 2017

Adding this style to the Dropdown folds it to the left

.leftDropdown {
  left: auto!important;
  right: 0!important;
}

<Dropdown className="leftDropdown" pointing={true}>
 <Dropdown.Menu>
   <Dropdown.Item>logout<Dropdown.Item>
 </Dropdown.Menu>
</Dropdown>

mcix on 1 Nov 2017

❤1

Note, there is already CSS support for this. We only need to add the prop. This was almost complete in this PR, but then abandoned:

https://github.com/Semantic-Org/Semantic-UI-React/pull/2174

levithomason on 10 Dec 2017

I was wondering if there has been any update on implementing the auto upward feature? My project just started using React and Semantic-UI-React and really like it. The only issue we currently have is the one described here. If a fix is not currently in the works or available, does anyone have a work-around for this issue that they would be willing to share so that we can get the dropdown to open upward automatically?

I have tried to work on a fix for this issue recently but have hit a wall with being able to determine the size of the dropdown menu. I can easily determine the size of the input box, but whenever I try to determine the size of the menu it comes back as 0 for height and width. If anyone has any tips on how I can detect the size using React that would also be appreciated.

terafil on 27 Feb 2018

@terafil auto direction Dropdown component is still not something that is available according to reading the history of this issue and anything referencing it. Since it is still tagged with "help wanted" anyone is welcome to take this task up and open a PR.