PDA

View Full Version : [CLOSED] Scrolling menu panel breaks layout



RCN
Feb 10, 2015, 11:42 PM
On the following example:
20881

Scroll down
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>

fabricio.murta
Feb 11, 2015, 12:32 AM
Hello Raphael!

This is closely related to the problem you reported on MenuPanel's Scrollbar on Chrome (http://forums.ext.net/showthread.php?53811). 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.

RCN
Feb 11, 2015, 12:46 AM

RCN
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.
21171

After analizing menu item's structure
21181

I found how to add ellipsis to the menu item, what is enough for us.
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>

fabricio.murta
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!

RCN
Feb 16, 2015, 7:56 PM
Please mark this thread as closed.