Semantic-ui: [Dropdown] - Scrollbar should be always visible on mobile

[larsbo]

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).

[mistayadmin]

Users, while on mobile assume there are limited number of options.

[leonidas-o]

A status update here?

[j-f1]

It might be better to change this to show 4½ items to indicate scrolling is possible.

[leonidas-o]

Would also be okay if you ask me. Or give the possibility to use the native scroll on mobile devices. It doesn't matter which approach, or all, but would be good if one is provided. Currently the usability of dropdown on mobile devices is bad.

[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 */
    }
}

[awgv]

Hello everyone. I’ve just tried it with Chrome for Android on Nougat, and the scrollbar is always visible; I’m assuming it’s only an issue on iOS? If someone has access to older Android versions, could you please confirm?

[leonidas-o]

yes, on Android 7, chrome the bar is visible. Using the default samsung internet browser the scroll bar is very small, hardly to see. On the samsung default browser there are also other issues.

On iOS the bar is missing.
Even though if the bar would be be shown, i still would prefer the 1/2 of the next item solution.

[AdamAnSubtractM]

Has anyone found a fix for this? I'm having the same issue. It only affects IOS devices. Thanks.

[stale[bot]]

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

[dpatel20]

I, too, have this issue - users on mobile think they only have a couple of options. On my Android device (7.1) the scrollbar is briefly shown and then disappears. Can the scrollbar be made permanently visible if the number of items is greater than the visible space.

The half item suggestion is a good workaround in the meantime.

[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/