Select menu too large even when hidden

[dipold]

If add a select-menu with data-native-menu="false" and too many option itens, for example, each menu item has 43px height totalizing impressive 21500px height that interferes in size (add a large white space below footer).

I think the solution would be to add a display : none to .ui-selectmenu-hidden class:

Of:
.ui-selectmenu-hidden { top: -9999px; left: -9999px; }

to
.ui-selectmenu-hidden { display: none; top: -9999px; left: -9999px; }

Thanks!

[toddparker]

Wow. From a technical perspective, I don't think we'd recommend using custom menus if you have more than 50 items in a custom list, it could slow down less powerful devices and we'd suggest using a native menu instead because they are more performant. Looks like you have 500 (!) items in your select so I'd definitely not use a custom menu in that case and you might want to look at ways to chunk this down to avoid having that many items in a select if you can.

If we hide these with display:none, accessibility wil suffer so we can't make that change unfortunately. Closing as won't fix. Thanks!

[dipold]

Hi! Thanks for answering.
I understand your argument, but:

*My country has between 300-500 cities per state.
*In 90% of cases the users don't need select the city because the app automatically identifies.
*My app is specific for iPad and open the custom list in 3 seconds. Not bad for me.

Unfortunately this bug makes a space of thousands of pixels below the footer.
I don't understand why custom list need "occupy space" below the footer even when hidden.

Anyway thank you.

Kind regards,

[toddparker]

This is how to hide the menu accessibly so screen readers can still access the menu contents and we can't impact accessibility. Just checked in a change to increase the top offset to handle your situation but I still would caution you using a custom menu in this case. Waiting 3 seconds for a 21k pixel high menu to render out seems like a poor user experience. A native menu should be much faster.