Hi,
We have a problem with the menu when located near the bottom of pages.
Often there is a scroll (EnableAutoScroll is True for other reasons!), despite lots of space above. It doesn't expand up instead of down seems to be the main problem.
In the following example:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="menu.aspx.vb" Inherits="TestaTredjepartWeb.menu" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="s" runat="server"> </asp:ScriptManager> <div> <table> <tr> <td style="vertical-align: top; padding-bottom: 0px"> <div style="height: 200px; background-color: blue"> </div> <div style="padding-bottom: 60px; background-color: red"> <telerik:RadMenu ID="menu" runat="server" RenderMode="Lightweight" ClickToOpen="true" ExpandDelay="0" EnableAutoScroll="true" OnClientItemOpening="function(sender, args){args.get_item()._defaultScrollSize = 0;}" > <Items> <telerik:RadMenuItem Text="Test1" Value="item1"> <Items> <telerik:RadMenuItem Text="1"></telerik:RadMenuItem> <telerik:RadMenuItem Text="2"></telerik:RadMenuItem> <telerik:RadMenuItem Text="3"></telerik:RadMenuItem> <telerik:RadMenuItem Text="4"></telerik:RadMenuItem> </Items> </telerik:RadMenuItem> </Items> </telerik:RadMenu> </div> </td> </tr> </table> </div> </form></body></html>When resizing the browser window near the edge of the red area, the menu expands down with a scroll despite the large blue area above where it could have expanded up!
If making the window a little bit smaller than the red area, it works as expected and expands up!
If making the window a little bit larger than the red area, it also works as expected and expands up!
If making the window much larger than the red area, it also works as expected and expands down (without scroll)!
Regards
Andreas
4 Answers, 1 is accepted
Rank 1
I posted the wrong sample, where I tried to fix it with a hack (which didn't work)...
This is the sample without the hack:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="menu.aspx.vb" Inherits="TestaTredjepartWeb.menu" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="s" runat="server"> </asp:ScriptManager> <div> <table> <tr> <td style="vertical-align: top; padding-bottom: 0px"> <div style="height: 200px; background-color: blue"> </div> <div style="padding-bottom: 76px; background-color: red"> <telerik:RadMenu ID="menu" runat="server" RenderMode="Lightweight" ClickToOpen="true" ExpandDelay="0" EnableAutoScroll="true" > <Items> <telerik:RadMenuItem Text="Test1" Value="item1"> <Items> <telerik:RadMenuItem Text="1"></telerik:RadMenuItem> <telerik:RadMenuItem Text="2"></telerik:RadMenuItem> <telerik:RadMenuItem Text="3"></telerik:RadMenuItem> <telerik:RadMenuItem Text="4"></telerik:RadMenuItem> </Items> </telerik:RadMenuItem> </Items> </telerik:RadMenu> </div> </td> </tr> </table> </div> </form></body></html>
The main aim of the EnableAutoScroll property when it set to true, is exactly to activate the scrolling functionality of the sub menu, when there is not enough space for rendering all its items. The only possible solution for your case is to remove the EnableAutoScroll property, or to set it to false.
Regards,
Magdalena
Telerik
Rank 1
Hi,
We really need the EnableAutoScroll in other scenarios: when more items in menu or a really small window...
What I mean is that this actually works in most cases, but in a certain span it does not!
If the window is slightly larger it works as expected (the menu still doesn't fit below without scroll), it expands up (without scroll!!!) instead of down since there is more room above!
Why does it work for some sizes of the window but not for some other? Feels like a bug to me!
Feels like a gray zone where this doesn't work...
Did you try my sample, and tested like I wrote?
Regards
Andreas
Yes, we have tested the project that you have provided but we succeeded to reproduce only the following behavior: When we reduced the browser window, the scroll bar appears and when we continued to reduce the window, the popup was opened up.
Now we have tested it again and we have succeeded to reproduce the following behavior: When we reduce the window, the scroll bar appear. When we increased it a little, the popup was opened up and when we continue to increase the height, the popup was open bottom again - with scroll bars.
The expected behavior is following: When you reduce the window height, the scroll bars appear, when you continue to reduce the window height too much, the popup should be opened up, when you increase the height, the popup shout be opened bottom and if there is not enough space, the scroll bar should appears.
We can provide you the following JavaScript workaround for fixing this issue:
var $ = $telerik.$;var $T = Telerik.Web.UI;$T.RadMenuItem.prototype._isAutoScrollPossible = function () { var menu = this.get_menu(); var maximumExpandSize = this._getMaximumExpandSize(); var animationContainer = this._getAnimationContainer(); $(animationContainer).css("height", "auto"); $(animationContainer).children(".rmScrollWrap").css("height", "auto"); if (this.get_groupSettings().get_flow() == $T.ItemFlow.Vertical) { var result = menu.get_autoScrollMinimumHeight() < maximumExpandSize && maximumExpandSize <= animationContainer.offsetHeight; return result; } else { return (menu.get_autoScrollMinimumWidth() < maximumExpandSize && maximumExpandSize <= animationContainer.offsetWidth); }}Please, keep in mind, that this workaround could not be applied for the scenario then the GroupSettings-Height property is set.
Do not hesitate to contact us if you have other questions.
Regards,
Magdalena
Telerik