I have a long menu with about 14 menu options which was created with the Select and Option elements. In Chrome’s mobile view (under Developer Tools) I’m not able to see the last few options in the menu and I’m not able to scroll down to them.
I can reach some of them if I reduce the text size of the menu options but it would make my menu text too small for users to see. I’m not able to reproduce this issue in jsfiddle but I’m not sure if this issue will showup when I deploy my page to the server.
So the question I have is how do I make my menu scrollable. I have set the size attribute of the Select element to a number but all it did was it hid the down arrow of the Select element and now the options are not even visible.
That’s a hard one to answer without seeing a demo.
That sounds to me as though you have fixed positioned the select which means if the options go below the viewport you won’t be able to scroll to see them.
Is this the case?
If so then instead of fixed positioning the select you would need to place it in a fixed positioned parent that has a height set to match the viewport and overflow:auto applied.
However you should know that on IOS mobile the options of the select element are rendered with a custom drop down and custom mechanisms to scroll and unlikely to be affected by the problem you describe. Chrome mobile view does not render these custom elements. (I believe other mobiles like android have a similar mechanism.)
That would probably mean that your problem is only evident on browser windows that are shorter than the length of your options.
If you post the actual code you are using (html & css) then we can make better guesses.
