PDA

View Full Version : [CLOSED] [#538] Menu item icon shifts when hovered in IE and Chrome



anup
Sep 04, 2014, 3:35 PM
Consider the following example:



<%@ 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:
http://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/extjs-build/examples/menu/menus.html?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?

Daniil
Sep 05, 2014, 7:18 AM
Hi Anup,

Thank you for the report!

Yes, it appears to be not reproducible with ExtJS 4.2.2, but it does with 4.2.1 (which is the base of the current Ext.NET trunk).
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/menu/menus.html?theme=gray

Created an Issue.
https://github.com/extnet/Ext.NET/issues/538

Fixed in the revisions #5952 and #5953. The fix will go to the v2.5.3 release.

anup
Sep 05, 2014, 9:09 AM
Thanks for the fix. A few days before I wrote this post, I did see the problem on Sencha's own examples but didn't when I rechecked while writing this post. I must have unknowingly used 4.2.1 first time, and then as the link shows I used 4.2.2 this time, which is why I didn't see it :)