Opened 7 years ago

Closed 7 years ago

#9042 closed bug (patcheswelcome)

Menu: In IE ui-icon-carat overlaps text when menu items are too wide

Reported by: kuz Owned by: kuz
Priority: minor Milestone: none
Component: ui.menu Version: 1.10.0
Keywords: Cc:
Blocked by: Blocking:

Description

In IE[8+] when text in menu item is long enough the ui-icon carat appears under text.

Example: http://jsfiddle.net/ckFbw/1/.

Change History (5)

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

Owner: set to kuz
Status: newpending
Summary: In IE ui-icon-carat under textMenu: In IE ui-icon-carat overlaps text when menu items are too wide

I'm assuming you're using a very small window to test this? When I open that fiddle in IE8, the menu is full width, so I need to shrink the frame to the point where I need to scroll. Then the caret display on top of the text. What are you expecting the result to be? What do you want us to change to accomodate your custom CSS?

comment:2 in reply to:  1 Changed 7 years ago by kuz

Status: pendingnew

Replying to scott.gonzalez:

I'm assuming you're using a very small window to test this? When I open that fiddle in IE8, the menu is full width, so I need to shrink the frame to the point where I need to scroll. Then the caret display on top of the text. What are you expecting the result to be? What do you want us to change to accomodate your custom CSS?

We tried to use widget "menu" for buttons with popups. "Popup"-menu is position via jquery-ui position (so css property "position" became "absolute"). We tried to avoid setting width of the menu in pixels and tried to get only one line for each menu-item. So "white-space" is set to "nowrap". Example 2: http://jsfiddle.net/ckFbw/2/. Expected behaviour achieved in Chrome and Firefox - caret displayed on the right of the menu item. In IE if the menu-item is the longest and it has popup the caret is displayed on the top of the menu-item text ending.

Chrome-like behaviour is expected in IE. The posible solution is to set bigger "padding-right" for menu-items with popups and to position caret same way, as it is done with icons in menu-items.

comment:3 Changed 7 years ago by tj.vantoll

Resolution: notabug
Status: newclosed

I see the overlap in IE 7 - 10, but I don't think this is something that UI should be handling.

I do not believe the use case of having menu items with no explicit width and cannot wrap is common. Plus you can work around this with a max-width and some overflow handling: http://jsfiddle.net/tj_vantoll/Rtbym/2/.

If others show interest in this we can reinvestigate.

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

Resolution: notabug
Status: closedreopened

I agree with TJ that this doesn't seem like something we need to handle, but I'd be happy to review any pull requests that might fix this.

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

Resolution: patcheswelcome
Status: reopenedclosed
Note: See TracTickets for help on using tickets.