Kendo UI Menu Not Working in IE 9

[Bill]

When I hover over the menu in iE9 it disappears.  It works fine with Chrome & IE8.  If I enable compatibility view in IE, when I hover over the menu, it doesn't disappear, however it will not expand on click.  Thoughts?

Edit:  I should add the file version of the DLL used is:  2012.2.710.340

@(Html.Kendo().Menu()

      .Name("menuUser")

      .OpenOnClick(true)

      .Items(items =>

      {

          items.Add().Text(User.Identity.Name)

               .Content(@<text>

               <table>

               <tr>

                <td style="vertical-align: top;"><img src="~/Images/icon_no_photo_no_border_60x60.png" alt="" /></td>

                <td>

                    <div class="header_sub_menu">

                        <h2>@ViewBag.AppContext.UserDisplayName</h2>

                        <h3>@ViewBag.AppContext.UserPrimaryEmail</h3>

                        <hr />

                        <ol>

                            <li>@Html.ActionLink("Settings", "Index", "Home", new { area = "Settings" }, null)</li>

                            <li>@Html.ActionLink("Log off", "LogOff", "Account", new { area = "" }, null)</li>

                        </ol>

                    </div>

                </td>

               </tr>

               </table>

               </text>);

      })

)

[Bill]

I've narrowed the issue down further.  It appears as though if you place the menu in a div that is floating right, hovering over the menu will cause it to wrap to the next line in IE9.  I've temporarily taken the menu out of the floating div and placed it in a normal left-aligned div for now.  Any suggestions would be appreciated.

[Bill]

After more troubleshooting, it appears that if the parent of the menu does not have an explicit width in IE9, the menu control will grow to 100% width on hover/use.

For an example, if I place the menu in a div and set the position of the div to absolute top 0 right 0, the menu shows up fine in the upper right-hand corner and it's width is fine.  As soon as I hover over the menu, the menu control grows to 100% of the screen's width even though the menu itself should be 75px (what it was before hover).  The menu items have dynamic text so specifying an explicit width on the menu's parent div is not a valid work around here.  The menu works fine in chrome.

<div id="header_menu">

 

    @(Html.Kendo().Menu()

      .Name("menuUser")

      .OpenOnClick(true)

      .Items(items =>

      {

          items.Add().Text(User.Identity.Name);

      })

)

 

</div>

#header_menu {

    position: absolute;

    top: 0px;

    right: 0px;

}




[Cameron]

Bill,

I have the same problem. I added this function to explicitly set the menu width and it appears to fix it up for me. My content width only changes on page load, however.

Hope this helps!

<script type="text/javascript">
    function SetMenuWidth()
    {
        var menu = $('#KendoMenuWrapper');
        menu.width(menu.width());
    }

    $(document).ready(function () {
        SetMenuWidth();
    });
</script>

- Cameron

[Bill]

Thanks Cameron, that works perfectly!

[Dennis]

nice.. works perfectly!

thx Cameron!

[Bill]

Well, this hack worked until I downloaded the latest KendoUI release (2012.3.1114.340) today.  Now I'm back to having the same issues.  :(

[Alex]

I had this issue too, interestingly enough seems to only affect IE9 in IE9 mode, if you change to IE8 mode it is no longer an issue. Also IE10 in  IE9 mode is not an issue.

Anyway I found a fix, by trying the only other weird kendo IE hack thing I've seen. (http://www.kendoui.com/forums/kendo-ui-web/menu/that-space-to-the-right-of-the-last-item.aspx). Remove this from kendo.common.css and the dancing menu goes away. Unfortunately I also have a more standard kendo menu on the same page, and removing the k-menu:after style broke that, so I ended up adding a new style to override the menu that is floated right only:

.myFloatedRightMenuClass .k-menu:after{
  display: none;
}

Hope this helps someone else.

[Max]

Thanks Alex!
It works perfectly!