Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 25 Jan 2021 16:57 by ADMIN
Anna
Created on: 18 Jan 2021 11:28
Category: Menu
Type: Bug Report
0
Kendo menu has no proper resize method

I'm having resize issues with the Menu control that I cannot sufficiently document at this time (my menu is inside a splitter, it's horizontal and it should be scrollable, but the arrows don't always appear).

I tried working around them by manually forcing a resize. Per documentation:

Each Kendo UI widget has a resize() method which can be used to trigger a layout readjustment instead of using kendo.resize. The resize method of the widget accepts a single Boolean parameter, which defines whether the control should execute its layout adjustment algorithm even if the widget dimensions have not changed ("force" mode).

However, the Menu widget does not override this method. It only binds to the Window resize event:


$(window).on(RESIZE, kendo.throttle(function(){
	that._setOverflowWrapperWidth(initialWidth, initialCssWidth);
	that._toggleScrollButtons(that.element, backwardBtn, forwardBtn, isHorizontal);
}, 100));

It's highly probable that the magic value 100 does not fit my use case. However, I cannot force a resize neither by:

  1. calling resize() on the widget
  2. calling resize(true) on the widget
  3. calling kendo.resize() on the container.

Possibly related to https://github.com/telerik/kendo-ui-core/issues/4067 .

2 comments
ADMIN
Aleksandar
Posted on: 25 Jan 2021 10:09

Hello Anna,

Thank you for reporting this. I have also logged an item in our GitHub repository where you can monitor the status of the item:

https://github.com/telerik/kendo-ui-core/issues/6247

As the scroll is added as a wrapper to the Menu element, until the issue is resolved, I can suggest is trying to set the width of the element and also the witdth of its parent:

$(document).ready(function() {
      	$("#example").width(400);
        const menu = $("#horizontalMenu").kendoMenu({
            scrollable: true
        }).data("kendoMenu");
      	//$("#example").width(200);
     	menu.element.width(200);
     	menu.element.parent().width(200);    
    });

Here is a modified example of the one you have provided. I hope the suggestion above would suit your scenario until the issue is resolved.

I have also updated your Telerik points.

Regards,
Aleksandar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Anna
Posted on: 18 Jan 2021 11:46
Here's a Dojo for this ticket: https://dojo.telerik.com/@GaloisGirl/iZATEYez/2
Create an account Log In
View
Type
Status
Category