Opened 6 years ago

Closed 6 years ago

Last modified 5 years ago

#5691 closed bug (fixed)

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:
Blocked by: Blocking:

Description

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 (10)

comment:1 Changed 6 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 6 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 6 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 6 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 6 years ago by jzaefferer

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 6 years ago by jzaefferer

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

comment:7 Changed 6 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 6 years ago by scottgonzalez

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

Fixed in a090faa by floating the menu.

comment:9 Changed 6 years ago by scottgonzalez

  • 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.