I'm currently using jQuery UI as part of a set of tools I'm making for my work. It's my first time using it, and overall I really like it. One part of the task is to make a system for other employees here to report issues using a series of dropdowns. Naturally I use selectmenu. It's nice. However, I came across an issue that I have been unable to find a fix for so far: when a selectmenu opens and overflows the bottom of the page, it becomes effectively worthless if I'm on a laptop and don't have access to a scroll wheel of some kind. This is relevant because the hardware that the employees will have to use this system will be cheap-ass $150 laptops with bad touchpads and no mice. I currently have one and I've been using it to test, and I can say with 100% certainty that the following issue will happen on these things.
I've found that the easiest way for me to show this is just to use the selectmenu demo: http://jqueryui.com/selectmenu/. If I open the bottom menu (Select a title), the window gets longer as it resizes to show the options, but, because it doesn't actually reposition the view, all the options are off the bottom of the screen. If I try to scroll down with the scroll bar or the scroll arrow, the menu closes and the window shrinks back down. This effectively prevents me from scrolling down to see the options, while the shrinking prevents me from scrolling after the menu closes and re-opening it. I can use the arrow keys, but I cannot see what I have selected until I make the selection. Essentially, the dropdown is unusable for me.
What I want for my project is for the menu to open upwards instead when it's at the bottom. I tried setting collision to flip, but, as far as I can tell, there is no collision because the page lengthens to accommodate the new content. Is there a way to get the behavior that I want without having to write something hack-y to override some standard behavior?
EDIT: As I wrote this I discovered that I can force a scroll by clicking and dragging down on the menu, basically forcing the browser to highlight the text of the options. It's clumsy but it technically works, but I'm going to post this anyway in the hopes that there is a better, more elegant solution.
Thanks for your reply. However, as I said in the last paragraph, I already tried setting collision to flip. In fact, it was the first thing I tried after I googled for this issue, as it sounds like exactly the behavior that I want. Unfortunately, as I also stated, it seemed to have no effect. As far as I can discern, collision did not occur because the dropdown opening forced the page to get longer, basically moving the edge down so that the dropdown never actually collides with anything. Maybe I just set up the flip setting incorrectly, but assuming I did it properly, that's what seems to happen.
Leave a comment on Ian Small's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic