Sep 04, 2014, 3:35 PM
[CLOSED] [#538] Menu item icon shifts when hovered in IE and Chrome
Consider the following example:
Now, if you repeat with IE or Chrome latest, the two icons for the menu items without the "fix" shift as you hover over them.
You can see this in the examples explorer as well:
https://examples2.ext.net/#/Toolbar/Menu/Overview/
(Go to the "With menu" menu item and bring down its menu and hover over the items)
I tried this with Sencha examples:
http://docs.sencha.com/extjs/4.2.2/e...tml?theme=gray
It seems to be okay there...
(I only tested this with the gray theme at the moment).
Possible solution:
The fix I applied in the above example is just an additional bit of CSS.
If you wanted to incorporate this into your own solution, you don't need the extra class name, and you don't need to add a class to every menu item; you can just override the global css rule and omit the class name:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Menu Icon should remain in same place when hovered over</title>
<style>
.x-menu-item-plain {
padding: 3px 3px 3px 28px;
text-overflow: ellipsis;
}
.x-menu-item-plain.x-menu-item-active {
border: none;
background: none;
}
.with-fix.x-menu-item-active .x-menu-item-icon { left: 2px; top: 3px; }
</style>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Panel runat="server" Width="600" Height="300">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="With menu">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Some title" Plain="true" />
<ext:MenuItem runat="server" Icon="Accept" Text="Menu 1" />
<ext:MenuItem runat="server" Icon="Add" Text="Menu 2" />
<ext:MenuItem runat="server" Text="Menu 3" />
<ext:MenuItem runat="server" Icon="Add" Text="With Active Fix for Icon position" Cls="with-fix" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</body>
</html>
If you run the above code, in Firefox latest, you should see that as you hover over any of the items, the icons do not shift - they stay in place as you would expect.Now, if you repeat with IE or Chrome latest, the two icons for the menu items without the "fix" shift as you hover over them.
You can see this in the examples explorer as well:
https://examples2.ext.net/#/Toolbar/Menu/Overview/
(Go to the "With menu" menu item and bring down its menu and hover over the items)
I tried this with Sencha examples:
http://docs.sencha.com/extjs/4.2.2/e...tml?theme=gray
It seems to be okay there...
(I only tested this with the gray theme at the moment).
Possible solution:
The fix I applied in the above example is just an additional bit of CSS.
If you wanted to incorporate this into your own solution, you don't need the extra class name, and you don't need to add a class to every menu item; you can just override the global css rule and omit the class name:
.x-menu-item-active .x-menu-item-icon { left: 2px; top: 3px; }
I don't know if that is the best fix or if I missed out some scenarios and if that causes side effects?
Last edited by Daniil; Sep 05, 2014 at 7:19 AM.
Reason: [CLOSED] [#538]