What's New?

[CLOSED] Scrolling menu panel breaks layout

  1. #1
    Feb 10, 2015, 11:42 PM

    [CLOSED] Scrolling menu panel breaks layout

    On the following example:
    Click image for larger version.  Name: mp001.png  Views: 2  Size: 3.4 KB  ID: 20881

    Scroll down
    Click image for larger version.  Name: mp002.png  Views: 3  Size: 3.6 KB  ID: 20882

    Thanks in advance.
    <!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
    <ext:ResourceManager Theme="Gray" runat="server" />
    <ext:MenuPanel Title="Ext.Net" Width="200" Height="200" runat="server">
        <Menu AutoScroll="true" runat="server">
            <Items>
                <ext:MenuItem Text="Brazil" Icon="FlagBr" runat="server" />
                <ext:MenuItem Text="United States" Icon="FlagUs" runat="server" />
                <ext:MenuItem Text="Japan" Icon="FlagJp" runat="server" />
                <ext:MenuItem Text="Brazil" Icon="FlagBr" runat="server" />
                <ext:MenuItem Text="United States" Icon="FlagUs" runat="server" />
                <ext:MenuItem Text="Japan" Icon="FlagJp" runat="server" />
                <ext:MenuItem Text="Brazil" Icon="FlagBr" runat="server" />
                <ext:MenuItem Text="United States" Icon="FlagUs" runat="server" />
                <ext:MenuItem Text="Japan" Icon="FlagJp" runat="server" />
                <ext:MenuItem Text="Brazil" Icon="FlagBr" runat="server" />
                <ext:MenuItem Text="United States" Icon="FlagUs" runat="server" />
                <ext:MenuItem Text="Japan" Icon="FlagJp" runat="server" />
                <ext:MenuItem Text="Brazil" Icon="FlagBr" runat="server" />
                <ext:MenuItem Text="United States" Icon="FlagUs" runat="server" />
                <ext:MenuItem Text="Japan" Icon="FlagJp" runat="server" />
                <ext:MenuItem Text="Brazil" Icon="FlagBr" runat="server" />
                <ext:MenuItem Text="United States" Icon="FlagUs" runat="server" />
                <ext:MenuItem Text="Japan" Icon="FlagJp" runat="server" />
            </Items>
        </Menu>
    </ext:MenuPanel>
</body>
</html>
    Last edited by fabricio.murta; Feb 17, 2015 at 12:13 AM. Reason: [CLOSED]
  2. #2
    Feb 11, 2015, 12:32 AM
    Hello Raphael!

    This is closely related to the problem you reported on MenuPanel's Scrollbar on Chrome. Take the AutoScroll="true" away, you'll have no longer this scroll button floating around. Again, I'd suggest for where you want to make a menu with scrolling, make there a panel, or GridPanel, where horizontal scrolling is better handled (and vertical scrolling can be made by vertical scrollbars).

    I hope this helps! Let me know otherwise.
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Feb 11, 2015, 12:46 AM
  4. #4
    Feb 13, 2015, 5:45 PM
    Take the AutoScroll="true" away.
    Yes, i can stop using this property. I don't remember precisely, but i think that i used AutoScroll to enable horizontal scrolling.

    As you can see, MenuPanel does not have horizontal scroll.
    Click image for larger version.  Name: mp001.png  Views: 1  Size: 2.4 KB  ID: 21171

    After analizing menu item's structure
    Click image for larger version.  Name: mp002.png  Views: 2  Size: 3.1 KB  ID: 21181

    I found how to add ellipsis to the menu item, what is enough for us.
    Click image for larger version.  Name: mp003.png  Views: 3  Size: 2.4 KB  ID: 21191
    <!DOCTYPE html>
<html>
<head runat="server">
<style type="text/css">
    .x-menu-item {
        text-overflow: ellipsis !important;
    }

    .x-menu-item-link, .x-menu-item-text {
        display: inline !important;
    }
</style>
</head>
<body>
    <ext:ResourceManager Theme="Gray" runat="server" />
    <ext:MenuPanel Margin="10" Title="Ext.Net" Width="100" Height="200" runat="server">
        <Menu runat="server">
            <Items>
                <ext:MenuItem Text="Brazil - Brazil - Brazil" Icon="FlagBr" runat="server" />
                <ext:MenuItem Text="United States - United States" Icon="FlagUs" runat="server" />
                <ext:MenuItem Text="Japan - Japan - Japan" Icon="FlagJp" runat="server" />
                <ext:MenuItem Text="Brazil - Brazil - Brazil" Icon="FlagBr" runat="server" />
                <ext:MenuItem Text="United States - United States" Icon="FlagUs" runat="server" />
                <ext:MenuItem Text="Japan - Japan - Japan" Icon="FlagJp" runat="server" />
                <ext:MenuItem Text="Brazil - Brazil - Brazil" Icon="FlagBr" runat="server" />
                <ext:MenuItem Text="United States - United States" Icon="FlagUs" runat="server" />
                <ext:MenuItem Text="Japan - Japan - Japan" Icon="FlagJp" runat="server" />
                <ext:MenuItem Text="Brazil - Brazil - Brazil" Icon="FlagBr" runat="server" />
                <ext:MenuItem Text="United States - United States" Icon="FlagUs" runat="server" />
                <ext:MenuItem Text="Japan - Japan - Japan" Icon="FlagJp" runat="server" />
            </Items>
        </Menu>
    </ext:MenuPanel>
</body>
</html>
  5. #5
    Feb 13, 2015, 7:36 PM
    Hello Raphael!

    Yes, there's no horizontal scrollbars, nor vertical ones. The menu is limited to the switches on top and bottom to slide thru the entries.

    Thank you for sharing your solution with ellipsis!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  6. #6
    Feb 16, 2015, 7:56 PM
    Please mark this thread as closed.

Similar Threads

  1. [CLOSED] Column's constrain breaks grid's layout
    By RCN in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 09, 2015, 12:17 PM
  2. [OPEN] [#323] GridPanel inside Menu breaks layout
    By RCN in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 29, 2015, 12:42 PM
  3. [CLOSED] TreePanel breaks ViewPort layout
    By RCN in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 29, 2015, 11:14 AM
  4. [CLOSED] SelectBox breaks layout
    By RCN in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 19, 2015, 11:29 AM
  5. Forcing panel layout inside menu
    By cmv in forum 1.x Help
    Replies: 5
    Last Post: Oct 17, 2012, 3:16 AM

Posting Permissions