This is a migrated thread and some comments may be shown as answers.

Mobile Menu Scrolling

5 Answers 115 Views
Menu
This is a migrated thread and some comments may be shown as answers.
rootberg
Top achievements
Rank 2
rootberg asked on 11 Aug 2014, 04:17 PM
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)?

5 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 12 Aug 2014, 07:52 AM
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.

 
0
rootberg
Top achievements
Rank 2
answered on 12 Aug 2014, 01:06 PM
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?

0
rootberg
Top achievements
Rank 2
answered on 12 Aug 2014, 01:14 PM
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).
0
rootberg
Top achievements
Rank 2
answered on 12 Aug 2014, 01:17 PM
Typo on my last post... the menu will be too high in medium resolution.
0
Dimitar
Telerik team
answered on 13 Aug 2014, 07:32 AM
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.

 
Tags
Menu
Asked by
rootberg
Top achievements
Rank 2
Answers by
Dimitar
Telerik team
rootberg
Top achievements
Rank 2
Share this question
or