Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#8875 closed bug (worksforme)

Autocomplete vertical scroll-to-top bug

Reported by: jjtroberts Owned by: jjtroberts
Priority: minor Milestone: 1.10.0
Component: ui.autocomplete Version: 1.9.2
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by Scott González)

Hovering over the very top or bottom of a scrollable suggestion list (using max-height) causes the menu to scroll. This is visible in the maxheight demo.

Change History (11)

comment:1 Changed 7 years ago by Scott González

Description: modified (diff)

comment:2 Changed 7 years ago by Scott González

Owner: set to jjtroberts
Status: newpending

Please do not dump large blocks of code into the ticket, especially code that cannot be run by anyone but yourself.

I'm not sure this is a bug; generally when a menu contains too many options, moving to the very top or bottom of the menu will cause it to scroll. Are you seeing something other than the behavior I describe in the updated description?

comment:3 Changed 7 years ago by jjtroberts

Status: pendingnew

It doesn't happen just at the very top or bottom. It happens at any height in the list. If I position my mouse cursor over the scrollbar and use the wheel to scroll down, it will scroll correctly, but the moment I try to mouse over a list item the entire list snaps back to the top.

comment:4 Changed 7 years ago by Scott González

Status: newpending

What browser are you seeing that happen in? Are you seeing the same behavior on http://view.jqueryui.com/master/demos/autocomplete/maxheight.html ?

comment:5 Changed 7 years ago by jjtroberts

Status: pendingnew

I have seen it in both Firefox 16.0 and Chrome 23.0.1271.95 m; and it does not mimic the behavior on the demo. Could it be a problem with the width of each list item in the suggestion list?

comment:6 Changed 7 years ago by Scott González

Status: newpending

Can you provide a reduced test case showing the problem? You can use http://jsfiddle.net/ZgAqH/Open/ as a starting point.

comment:7 Changed 7 years ago by jjtroberts

Status: pendingnew

I'd like to do that, but I don't see how to use the 1.9.2 version of jquery at jsFiddle. They seem to stop at 1.8.2

comment:8 Changed 7 years ago by Scott González

Status: newpending

The fiddle link I sent is already set up to use jQuery UI git (current master). It's linked from the Manage Resources panel on the right. Just add the relevant markup in the HTML section (just the contents inside <body>, don't put a full document in there) and whatever custom CSS/JS you need to reproduce the problem. Try to get it stripped down as much as possible.

comment:9 Changed 7 years ago by jjtroberts

Status: pendingnew

http://jsfiddle.net/jjtroberts/Kn45F/5/

Tried to strip it down as much as possible.

Last edited 7 years ago by jjtroberts (previous) (diff)

comment:10 Changed 7 years ago by Scott González

Resolution: worksforme
Status: newclosed

No, a few thousand lines of markup is certainly not a reduced test case. I'm going to close this since it works in our demo. Please use the forums or StackOverflow for support. If you can reduce this and there actually is a bug in jQuery UI, please report a new bug with the reduced test case.

comment:11 Changed 7 years ago by jjtroberts

Well, my lack of prowess at jsFiddle not withstanding, I managed to find the solution on my end. Perhaps this can help someone else with a similar problem in the future.

The problem was being caused by floats withing the suggestion list. I removed the floats and autocomplete works as expected. Guess I'll have to resort to tables.

Last edited 7 years ago by jjtroberts (previous) (diff)
Note: See TracTickets for help on using tickets.