Skip to main content

Search and Top Navigation

#5691 closed bug (fixed)

Opened June 04, 2010 11:09AM UTC

Closed July 19, 2010 09:26PM UTC

Last modified November 19, 2010 06:26PM UTC

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.

Attachments (0)
Change History (10)

Changed June 04, 2010 11:23AM UTC by kaito comment:1

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

Changed June 09, 2010 12:55PM UTC by spudly comment:2

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.

Changed June 15, 2010 07:47PM UTC by sleyhane comment:3

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.

Changed June 24, 2010 12:15PM UTC by dmuir comment:4

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

Changed June 25, 2010 02:47PM UTC by jzaefferer comment:5

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.

Changed June 25, 2010 02:58PM UTC by jzaefferer comment:6

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

Changed June 29, 2010 08:34PM UTC by davidcroda comment:7

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?

Changed July 19, 2010 09:26PM UTC by scottgonzalez comment:8

milestone: TBD1.9
resolution: → fixed
status: newclosed

Fixed in a090faa by floating the menu.

Changed August 04, 2010 01:29AM UTC by scottgonzalez comment:9

milestone: 1.91.8.3

Changed November 19, 2010 06:26PM UTC by Scott González comment:10

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

Changeset: a090faa833cf5b40105bb4aa74bca7ac39366fe9