[CLOSED] [#538] Menu item icon shifts when hovered in IE and Chrome

  1. #1

    [CLOSED] [#538] Menu item icon shifts when hovered in IE and Chrome

    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:
    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]
  2. #2
    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/e...tml?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.
    Last edited by Daniil; Sep 05, 2014 at 4:51 PM.
  3. #3
    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 :)

Similar Threads

  1. Replies: 8
    Last Post: Jul 29, 2012, 10:58 AM
  2. Replies: 2
    Last Post: Apr 02, 2012, 7:48 AM
  3. [CLOSED] Always selected Item is nothing for combobox as menu item
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 04, 2011, 4:51 PM
  4. [CLOSED] Menu inside Component menu item
    By tansu in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 15, 2010, 2:32 PM
  5. Replies: 5
    Last Post: Mar 05, 2010, 3:15 PM

Posting Permissions