wrong menu size calculation in webkit browsers

[kaito]

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.

[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();

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

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

[dmuir]

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

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

[jzaefferer]

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

[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?

[scottgonzalez]

Fixed in ​a090faa by floating the menu.

[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