Bug with <div> container

1 posts, 0 answers
  1. Constantine
    Constantine avatar
    9 posts
    Member since:
    Apr 2012

    Posted 19 Jul 2012 Link to this post

    Hi!

    There is a problem with 'vertical' menu and <div> container. Example:

    <div id="menu"></div>
    <p><br/><br/><br/><br/></p>
    <ul id="menu-2"></ul>
     
     
    <script>
        $(function()  {
     
            var m = $('#menu, #menu-2').kendoMenu({
     
                dataSource: [
                    {
                        text: "Baseball", imageUrl: "../../content/shared/icons/sports/baseball.png",
                        items: [
                            { text: "Top News", imageUrl: "../../content/shared/icons/16/star.png" },
                            { text: "Photo Galleries", imageUrl: "../../content/shared/icons/16/photo.png" },
                            { text: "Videos Records", imageUrl: "../../content/shared/icons/16/video.png" },
                            { text: "Radio Records", imageUrl: "../../content/shared/icons/16/speaker.png" }
                        ]
                    },
                    {
                        text: "Golf", imageUrl: "../../content/shared/icons/sports/golf.png",
                        items: [
                            { text: "Top News", imageUrl: "../../content/shared/icons/16/star.png" },
                            { text: "Photo Galleries", imageUrl: "../../content/shared/icons/16/photo.png" },
                            { text: "Videos Records", imageUrl: "../../content/shared/icons/16/video.png" },
                            { text: "Radio Records", imageUrl: "../../content/shared/icons/16/speaker.png" }
                        ]
                    },
                    {
                        text: "Swimming", imageUrl: "../../content/shared/icons/sports/swimming.png",
                        items: [
                            { text: "Top News", imageUrl: "../../content/shared/icons/16/star.png" },
                            { text: "Photo Galleries", imageUrl: "../../content/shared/icons/16/photo.png" }
                        ]
                    },
                    {
                        text: "Snowboarding", imageUrl: "../../content/shared/icons/sports/snowboarding.png",
                        items: [
                            { text: "Photo Galleries", imageUrl: "../../content/shared/icons/16/photo.png" },
                            { text: "Videos Records", imageUrl: "../../content/shared/icons/16/video.png" }
                        ]
                    }
                ],
                orientation: 'vertical'
            });
        });
    </script>
     
    <style>
        #menu-2
        {
            width: 300px;
        }
     
    </style>

    Results in attach.

    <ul> container works fine, but not <div>.

    Problem is with this rule in kendo.common.css:

    ul.k-menu-vertical > .k-item
    {
        display: block;
        float: none;
        border-width: 0;
    }

    I added "div.k-menu-vertical" with same rules and it works fine.
Back to Top