Approved
Last Updated: 20 Mar 2019 15:35 by ADMIN
CaseNet
Created on: 07 Mar 2019 11:02
Category: UI for ASP.NET AJAX
Type: Bug Report
0
Mobile RenderMode Menu arrows not visible after animation in Chrome
Some of the arrows in the Mobile Menu are missing in Chrome



<telerik:RadMenu ID="RadMenu1" RenderMode="Mobile" runat="server" ></telerik:RadMenu>

protected void Page_Load(object sender, EventArgs e)
{
    RadMenu1.RenderMode = RenderMode.Mobile;
    RadMenu1.Width = 300;
    for (int i = 0; i < 10; i++)
    {
        var radmenuItem = new RadMenuItem();
        radmenuItem.Text = "demo radmenu item " + i.ToString();
        for (int j = 0; j < 10; j++)
        {
            var radmenuItemChild = new RadMenuItem();
            radmenuItemChild.Text = "demo radmenu item child " + j.ToString();
            radmenuItem.Items.Add(radmenuItemChild);
        }
 
        RadMenu1.Items.Add(radmenuItem);
    }
}
1 comment
ADMIN
Peter Milchev
Posted on: 07 Mar 2019 11:11
Hello,

The issue seems to be related to how the browser handles the jQueryAnimations that are used internally. 

One option to work around this is to disable the Expand animations by setting the Menu's ExpandAnimation-Type property to "None"

The following workaround should allow you to fix the issue without disabling the animations: 

var old_transition = $telerik.transition;
$telerik.transition = function (element, properties, duration, easing, complete) {
    if (!complete) {
        complete = function () {
            $telerik.$(".RadMenuPopup .rmToggle").hide().show();
        }
    }
    old_transition.call(this, element, properties, duration, easing, complete);
}

Regards,
Peter Milchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.