Approved
Last Updated: 23 Apr 2019 06:36 by ADMIN
Richard
Created on: 22 Apr 2019 03:01
Category: Menu
Type: Feature Request
0
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.