Menu sub-menu rendering "bouncing" issue

4 posts, 0 answers
  1. Chris
    Chris avatar
    25 posts
    Member since:
    Apr 2011

    Posted 14 Nov 2013 Link to this post

    This is a very difficult issue to explain so I'm going to give you some instructions on how to replicate it and see it for yourself.

    1. Go to the Kendo menu demonstration page demonstrating the possible directions.
    2. Hover over the "Girl's" menu.
    3. Hover over any sub-menu.

    When you do this you should see that all the arrows seem to "bounce" when the sub-menu opens.  If you move the mouse up and down the "Girl's" sub-menu items you can clearly see all the arrows within that menu bounce.  This does not happen in any other menu (except when it is the third or greater menu option along and I've checked the CSS, it does not appear to be that which is causing this; I suspect it is a scripting issue.

    This also happens on the Orientation demo page, and it even happens with you change the orientation to vertical.

    I've attached a screencast in case it is just my browser, but I'm using the latest version of Chrome (v. 31.0.1650.48 m).
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 14 Nov 2013 Link to this post

    Hi Chris,

    This looks like a browser rendering issue, because it does not occur for a particular item group, but for an item group with a particular order index.

    I can suggest you to apply a min-width style to the item group, which bounces during hover:

    .myRootItem > div > .k-group
    {
        min-width: 200px;
    }

    In this way the group will become a little larger and the undesired glitch with disappear. myRootItem is a CSS class applied to the parent Menu item <li> element.

    Regards,
    Dimo
    Telerik
    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
  4. Chris
    Chris avatar
    25 posts
    Member since:
    Apr 2011

    Posted 22 Nov 2013 Link to this post

    Hi Dimo,

    Thank you for the quick response and I apologise for not coming back sooner.

    Whilst that is a solution to the problem, it isn't what I'd class as a permanent solution or even a particularly useful solution if the menu is dynamically populated and the width the menu could cannot be predetermined as it is in this case.

    I've demoed other menu solutions by other companies/providers, including JQuery UI and this issue only seems to happen with your menu.  I understand that the code behind is likely to be completely different but all that says to me is that a slightly different implementation by you and the issue should disappear - even if it is a browser rendering issue.

    Can this be logged as a bug please?
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 26 Nov 2013 Link to this post

    Hello Chris,

    We will try to find out the exact cause of the problem and fix it.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready