How to make upward open dropdown?

[tempurai]

Hi, thank you for this great repo.

I am having some trouble make a upward open dropdown, all examples I saw only have down, left and right opening dropdown. How can we make a upward one, which is very important when we have dropdown/selector on footer?

Thanks!

[edcarroll]

Is this page of any help here? Most of the CSS stuff is out of the scope of this library, and handled by S-UI itself.

[PapsOu]

@edcarroll : I tried on the official doc page the « States » dropdown.

Step 1 - When the dropdown is on top of the page, the dropdown menu is displayed under the dropdown button. Step 2 - When scrolling in order to move the button near the footer, the dropdown is displayed above the button.

I've tried the same procedure on your doc site (https://edcarroll.github.io/ng2-semantic-ui/#/modules/select) with the « Basic » dropdown and the Step 2 does not move the dropdown menu above.

So I think it's not a CSS related problem. Original SUI should probably use a positioning jQuery library to check the dropdown position.

[kaoecoito]

I have the same problem. When the dropdown is at the bottom of the page it tries to open it down, in the normal version of semantic-ui it detects that it has no space and opens up. Has anyone found a solution?

[kaoecoito]

After reading the original source JQuery and comparing with how it is done in the version in Angular I understood how to solve this problem. Basically a combination of CSS with the transition type change generates the expected effect. In the JQuery version is used auto detection that is not present in the Angular version.

In div with use suiDropdown add class upward

<div class="ui primary upward dropdown button" suiDropdown autofocus>

In div with use suiDropdownMenu add attribute menuTransition="slide up"

<div class="menu" suiDropdownMenu menuTransition="slide up">

[hansnath3]

After reading the original source JQuery and comparing with how it is done in the version in Angular I understood how to solve this problem. Basically a combination of CSS with the transition type change generates the expected effect. In the JQuery version is used auto detection that is not present in the Angular version.

In div with use suiDropdown add class upward

<div class="ui primary upward dropdown button" suiDropdown autofocus>

In div with use suiDropdownMenu add attribute menuTransition="slide up"

<div class="menu" suiDropdownMenu menuTransition="slide up">

Thanks Kaoecoito, Your understanding solved my problems too.