Opened 11 years ago
Closed 10 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 follow-up: 2 Changed 11 years ago by
| Owner: | set to kuz |
|---|---|
| Status: | new → pending |
| Summary: | In IE ui-icon-carat under text → Menu: In IE ui-icon-carat overlaps text when menu items are too wide |
comment:2 Changed 11 years ago by
| Status: | pending → new |
|---|
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 11 years ago by
| Resolution: | → notabug |
|---|---|
| Status: | new → closed |
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 10 years ago by
| Resolution: | notabug |
|---|---|
| Status: | closed → reopened |
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 10 years ago by
| Resolution: | → patcheswelcome |
|---|---|
| Status: | reopened → closed |
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?