Ticket #5691 (closed bug: fixed)

Opened 5 years ago

Last modified 5 years ago

wrong menu size calculation in webkit browsers

Reported by: kaito Owned by:
Priority: minor Milestone: 1.8.3
Component: ui.autocomplete Version: 1.8.1
Keywords: Cc:
Blocking: Blocked by:


In all webkit-based browsers the menu size calculation seems to be wrong. Just test it at the autocomplete demo site with chrome or safari.

eg: In 'Default functionality' search for 'asp' and then delete one by one character and see the menu getting wider and wider.

Change History

comment:1 Changed 5 years ago by kaito

hmm... without resetting the width of the ul in line 279 it seems to work perfectly in all browsers:

// menuWidth = ul.width( "" ).width();
menuWidth = ul.width();

comment:2 Changed 5 years ago by spudly

Same issue here. This can be reliably reproduced on any of the "remote" demos for autocomplete on the jqueryui website.

It happens if you begin typing, wait for a menu to popup, then continue typing or hit backspace.

To reproduce:

  1. Open Chrome or Safari
  2. Go to  http://jqueryui.com/demos/autocomplete/#remote
  3. Type "ja"
  4. Wait for menu
  5. If chrome, type "y". If safari, hit backspace.

You'll see the menu expand way out to the right of the screen.

Tested in Safari 5 (windows) and chrome 5 & 6. Works find in IE/Firefox.

comment:3 Changed 5 years ago by sleyhane

This is a CSS issue was introduced in the following commit:  http://github.com/jquery/jquery-ui/commit/b7ad981e6965ecf92882b98ca99bb3108748ffe7

Removing the changes to the 'float' and 'width' properties in the context of an autocomplete resolves the issue.

comment:4 Changed 5 years ago by dmuir

I just removed the float, and that fixed it for me.. although IE acts a bit weird now.

comment:5 Changed 5 years ago by joern.zaefferer

This doesn't seem to be a CSS issue per-se, as the autocomplete sets a width as an inline style (maybe related to  http://github.com/yacchatta/jquery-ui/commit/26d93a7eb69a9ee04919bdb33d27f5f76b66c93d). Likely the width calculation is flawed, for whatever reason, resulting in the bad calculation.

comment:6 Changed 5 years ago by joern.zaefferer

It's also questionable whether it makes sense to resize the menu all the time.

comment:7 Changed 5 years ago by davidcroda

I can confirm that dmuir's solution worked for me as well.

While you are right joern that the style is set inline to a large px width, perhaps this calculation was caused by the faulty css?

comment:8 Changed 5 years ago by scott.gonzalez

  • Status changed from new to closed
  • Resolution set to fixed
  • Milestone changed from TBD to 1.9

Fixed in  a090faa by floating the menu.

comment:9 Changed 5 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.3

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

Menu: float .ui-menu since all .ui-menu-item elements are floated. Fixes #5691 - wrong menu size calculation in webkit browsers (Autocomplete).

Changeset: a090faa833cf5b40105bb4aa74bca7ac39366fe9

Note: See TracTickets for help on using tickets.