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

Bug with <div> container

0 Answers 38 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Constantine
Top achievements
Rank 1
Constantine asked on 20 Jul 2012, 04:13 AM
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.

No answers yet. Maybe you can help?

Tags
Menu
Asked by
Constantine
Top achievements
Rank 1
Share this question
or