Menu Wrapping on Mobile Devices

2 posts, 0 answers
  1. Daniel
    Daniel avatar
    21 posts
    Member since:
    Nov 2011

    Posted 30 May 2012 Link to this post

    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

  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 04 Jun 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top