Menu Wrapping on Mobile Devices

[Daniel]

Hi,

Can the menu exist as one horizontal list that does not wrap to consume more page/screen real estate than is required?  The problem is this 

    | browser width boundary
| menu item 1 | menu item 2 |
| menu item 3 | menu item 4 |
      | browser width boundary

I desire this:
    | browser width boundary
    |
| menu item 1 | menu item 2 | menu item 3 | menu item 4 | 
            |
    | browser width boundary

Is it possible?  One thought, for horizontal scrolling due to the inevitable overflow that this type of layout would create, is to wrap the menu with a simple div and use the iScroll library (http://cubiq.org/iscroll-4) for the horizontal scrolling of menu items, like this: 

myScroll = new iScroll('wrapper'); // 'wrapper' is the div element with id='wrapper'


Would this type of solution work for the Kendo UI menu control?

Dan

[Kamen Bundev]

Hello Daniel,

This can be done by using our Kendo Mobile Scroller (which is included in all versions of the suite to support scrolling on mobile devices) - it can be initialized on any container. However, there's one downside - for any scroller - ours or iScroll you will need overflow: hidden on the menu container and the menu doesn't detach its sub menus and they will get hidden. One workaround is to make the scrolling area bigger, something like this:
<style>
#menu > .k-item
{
    float: none;
    display: inline-block;
}
#menu
{
    float: left;
    white-space: nowrap;
}
#container
{
    overflow: hidden;
    height: 200px;
}
</style>
<div id="container">
    <ul id="menu">
        <li>Test 1
            <ul>
                <li>Sub Item 1
                    <ul>
                        <li>Sub Sub Item 1</li>
                        <li>Sub Sub Item 2</li>
                    </ul>
                </li>
                <li>Sub Item 2</li>
            </ul>
        </li>
        <li>Test 2
            <ul>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
            </ul>
        </li>
        ...
        ...
    </ul>
</div>
<script>
    $(function () {
        $("#menu").kendoMenu();
        $("#container").kendoMobileScroller();
    });
</script>

However I would advise against using menu on mobile as its usability is rather limited.

Greetings,
Kamen Bundev
the Telerik team