Mobile Menu Scrolling

6 posts, 0 answers
  1. rootberg
    rootberg avatar
    38 posts
    Member since:
    Oct 2012

    Posted 11 Aug 2014 Link to this post

    I have an issue with the way scrolling is handled on the menu control when it is set to mobile mode. When you get to over about 6 items in the mobile menu, the items scroll inside the menu container. This is fine on a desktop browser, but is problematic when I tested on an iPhone. First, the fact that there are more items to scroll down too is not immediately evident to the user, as there are no scroll bars in the mobile browser until you begin to scroll.  Second, then scrolling doesn't always work in the menu's container, and the entire page scrolls rather then the menu.

    Is there a setting for the menu that forces it to be 100% height, to function similar to how the mobile version of the Telerik.com menu works (as of writing this post)?
  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 12 Aug 2014 Link to this post

    Hi,

    Currently the Telerik.com mobile menu does not feature sub-menu items, but represents a flat structure that shows all available resources. RadMenu with RenderMode="Mobile", however, is build to handle hierarchical menu structure, featuring sub-menu items with different length.

    There are several ways to adjust the Mobile RadMenu height and overcome the inconvenience faced.

    The first approach is to remove the RadMenu "Height" property from the RadMenu markup. When no height is set, the RadMenu dropdown becomes as high as required to show all root items on initial expand.

    Another option is to set height value that would show the last initially visible item partially, which may indicate to users that there are more items downwards.

    And the last option is to avoid menu scrolling at all by setting "Height" value that would fit the highest number of items your menu or a sub-menu has. It depends on your case which approach you could apply.

    As for your second issue, I was not able to reproduce it. On my side the RadMenu items scroll inside the container and do not cause page scrolling. Is there any reproduction pattern/scenario and could you specify which browser can be used for replicating the issue?

    Regards,
    Dimitar
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. rootberg
    rootberg avatar
    38 posts
    Member since:
    Oct 2012

    Posted 12 Aug 2014 in reply to Dimitar Link to this post

    If you omit the height property, the root items still scroll. However, when I set the property "EnableAutoScroll" to true, the root of the mobile menu expands to the full height on a desktop browser, but not on a mobile browser.

    Regarding the issue of the page scrolling and not the menu, This was on chrome for iOS and Safari on iOS, but I don't think it is an issue with the mobile menu control, rather it is the touch input sensor failing to read my mind as to what I want to scroll :-)  (the page or the container of the control).

    I know that the Telerik.com website is using Sitefinity, but the mobile menu there is allot more elegant then the one provided with the RadMenu control, in that it has styling and separation. Is there any plans to expand the capabilities of the RadMenu in mobile mode?

  5. rootberg
    rootberg avatar
    38 posts
    Member since:
    Oct 2012

    Posted 12 Aug 2014 in reply to rootberg Link to this post

    Also, if I set the height to a number large enough for the entire menu to display in Extra Small and Small resolution modes, then the menu is high long in medium resolution mode (I use a different menu in Large and XL mode).
  6. rootberg
    rootberg avatar
    38 posts
    Member since:
    Oct 2012

    Posted 12 Aug 2014 in reply to rootberg Link to this post

    Typo on my last post... the menu will be too high in medium resolution.
  7. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 13 Aug 2014 Link to this post

    Hi rootberg,

    Extending the mobile RadMenu capabilities depends on the feedback received from customers.
    I have logged a Mobile RadMenu Feature Request for a visual indicator which suggests to users that the expanded menu is scrollable. You may vote for it, comment it and track its status by clicking the "Follow this item" button.

    As for the height property not set and the EnableAutoScroll="true" issues you mention, unfortunately, I am not able to reproduce that behavior on my side. You may check if you are setting menu height for mobile devices. Probably you have some logic in the code behind for Small and Medium ranges that sets height. On my side, the root menu always expands to show all root items and cannot be scrolled - tested on iOS Safari and Chrome, as well as Android Chrome browser.

    And last, but not least, you may use the RadDeviceDetectionFramework and the ScreenSize information it provides, to set different dimensions and other properties you would like for different screen size ranges. It would enable you to achieve a custom layout for Small, Medium, Large screen devices, or even for ScreenSize ranges you would like to set by yourself.

    Regards,
    Dimitar
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017