Scroll in menu despite lots of space above

5 posts, 0 answers
  1. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 25 Aug 2015 Link to this post

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

  2. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 25 Aug 2015 in reply to Andreas Link to this post

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

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 26 Aug 2015 Link to this post

    Hello Andreas,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 26 Aug 2015 in reply to Magdalena Link to this post

    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

  6. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 27 Aug 2015 Link to this post

    Hi 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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017