[Dropdown] - Scrollbar should be always visible on mobile

Steps to Reproduce

1. Create a dropdown menu with more than 4 items.
2. Open the dropdown on mobile device (maybe Android works, I have tested iOS only).
3. Be shocked that apparently only four options are available!

Expected The scrollbar inside the dropdown menu should be visible to indicate that there are more than 4 items to choose from.

Result The dropdown menu shows only 4 items without any hint that there are more. Only after touching the menu it becomes clear that you can scroll down for more items.

Testcase http://jsfiddle.net/j08rb5jr/ http://jsfiddle.net/j08rb5jr/embedded/result/ (Mobile link)

Even the scrolling variation which sounds as it would solve this, shows no scrollbar without touching the dropdown menu ☹️ (second example in test case, it just shows 6 instead of 4 items by default).

[lubber-de]

We prepared a little swipe animation to the right of the dropdown (where the scrollbar should appear) in the community fork Fomantic-UI by https://github.com/fomantic/Fomantic-UI/pull/1651 You only have to add scrollhint class to the dropdown menu

Check here (using an iOS device): https://raw.githack.com/lubber-de/fomantic-ui/jsfiddlefullscreen/jsfiddle/#!lubber/2mcak7xr/167/

[leonidas-o]

As a fast workaround, and if someone wants to submit a PR. To have the 1/2 of the next item solution to indicate there is more, change the max-height from:

@media only screen and (max-width: 767px) {
    .ui.selection.dropdown .menu {
        max-height: 8.01428571rem; /* + 1.335714285 to 9.349999995rem */
    }
}
@media only screen and (min-width: 768px) {
    .ui.selection.dropdown .menu {
        max-height: 10.68571429rem; /* + 1.3357142863 to 12.0214285763rem */
    }
}
@media only screen and (min-width: 992px) {
    .ui.selection.dropdown .menu {
        max-height: 16.02857143rem; /* + 1.3357142858 to 17.3642857158rem */
    }
}
@media only screen and (min-width: 1920px) {
    .ui.selection.dropdown .menu {
        max-height: 21.37142857rem; /* + 1.3357142856 to 22.7071428556rem */
    }
}