Menu doesn't automatically collapse to fit the window size

Progress® Kendo UI® for Angular Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Approved

Last Updated: 23 Apr 2019 06:36 by ADMIN

Richard

Created on: 22 Apr 2019 03:01

Category: Menu

Type: Feature Request

Menu doesn't automatically collapse to fit the window size

When we have more menu items than that can be displayed in a single line in the browser window, the menu will span multiple lines.

Can we have the menu items automatically collapsed to '...' button so that they can fit in a single line and when user clicks on the '...' button, they can see those items that cannot fit in the current line.

3 comments

ADMIN

Svetlin

Posted on: 23 Apr 2019 06:36

Hi Richard,

Thank you for the provided feedback.

Indeed, such feature would be a valuable addition to the built in functionalities of Kendo UI for Angular. This is is why, I converted this ticket to be a public feature request item, that can be voted for at the following link:
https://feedback.telerik.com/kendo-angular-ui/1406035-menu-doesn-t-automatically-collapse-to-fit-the-window-size

Let me know in case I can provide any further assistance about Kendo UI for Angular.

Regards,
Svetlin
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.

Richard

Posted on: 22 Apr 2019 10:50

I see. However, it is nice to have such a feature that the menu can automatically fit into a single line.

This is a very common scenario when the menu is too long, or when it is displayed on a mobile device.

ADMIN

Svetlin

Posted on: 22 Apr 2019 10:42

Hi Richard,

Indeed, such feature is not available as a built in feature at the moment. What could be done at this point is to dynamically change the orientation of the Menu component so that it is displayed vertically when the screen size becomes too small.

What else could be done is to display the menu items always on a single line by customizing the default Kendo stryles:

import { Component, ViewEncapsulation } from '@angular/core';

import { items } from './items';

@Component({

selector: 'my-app',

template: `

<kendo-menu [items]="items">

</kendo-menu>

`,styles: [`

.k-menu .k-item{

display: inline-block;

}

`],

encapsulation: ViewEncapsulation.None

})

export class AppComponent {

public items: any[] = items;

}

Then, based on the width of the screen size it is possible to dynamically display or hide the '...' button. However, such functionality would be subject to a custom implementation, rather than a built in feature of Kendo UI for Angular.

Let me know in case I can provide any further assistance about this case.

Regards,
Svetlin
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.