Kendo UI Menu Not Working in IE 9

9 posts, 1 answers
  1. Bill
    Bill avatar
    11 posts
    Member since:
    Jul 2012

    Posted 21 Sep 2012 Link to this post

    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>);
          })
    )
  2. Bill
    Bill avatar
    11 posts
    Member since:
    Jul 2012

    Posted 28 Sep 2012 Link to this post

    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.

  3. Kendo UI is VS 2017 Ready
  4. Bill
    Bill avatar
    11 posts
    Member since:
    Jul 2012

    Posted 05 Oct 2012 Link to this post

    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 {
        positionabsolute;
        top0px;
        right0px;
    }

  5. Answer
    Cameron
    Cameron avatar
    1 posts
    Member since:
    Oct 2012

    Posted 05 Oct 2012 Link to this post

    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
  6. Bill
    Bill avatar
    11 posts
    Member since:
    Jul 2012

    Posted 05 Oct 2012 Link to this post

    Thanks Cameron, that works perfectly!
  7. Dennis
    Dennis avatar
    1 posts
    Member since:
    Oct 2012

    Posted 19 Oct 2012 Link to this post

    nice.. works perfectly!

    thx Cameron!
  8. Bill
    Bill avatar
    11 posts
    Member since:
    Jul 2012

    Posted 14 Nov 2012 Link to this post

    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.  :(
  9. Alex
    Alex avatar
    16 posts
    Member since:
    Oct 2011

    Posted 09 Aug 2013 Link to this post

    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.

  10. Max
    Max avatar
    4 posts
    Member since:
    Nov 2013

    Posted 14 Nov 2013 Link to this post

    Thanks Alex!
    It works perfectly!
Back to Top
Kendo UI is VS 2017 Ready