Menu wrong display when bigger than screen

[Thomas]

Hi,

I was surprised to see there is no possibility to have a scrollable menu when the rendered content is bigger than the screen.

Here is an example (the list starts at the letter B, but only items from P are displayed).  Is there any way to access the hidden items?

[Dimo]

Hello Thomas,

The discussed behavior has been implemented and will be available in future internal and official builds.

The height of the Menu groups can be limited with CSS like this:

.k-menu  .k-group
{
    max-height: 600px;
    overflow: auto;
}

Please note that the above approach will work well only if the expanded Menu groups do not have child groups, otherwise the latter will not be visible when expanded. That's why it is important to change the above selector, according to your scenario, so that it targets only specific groups, for example:

.k-menu  .myItem  .k-group
{
    max-height: 600px;
    overflow: auto;
}

Where myItem is a CSS class applied to the root item's <li> element, which has a long chind group with no additonal nested groups. An alternative approach is:

.k-menu .myScrollableGroup
{
       /* ... */
}

Where myScrollableGroup is a CSS class applied to all Menu groups, which have no child groups.

The implemented Menu behavior will act according to the above considerations - only Menu groups with no child groups and with no child item templates will be scrollable.

Regards,
Dimo
Telerik

[Thomas]

Hi Dimo, 

Thanks for the answer. When will it be implemented? I'm very interested as the other solution you suggest will not work if your menu is different for every user as it is in the application I've posted the screenshot of. There are plenty of children (submenus), and as the menu needs to be flexible and configurable for each user/group, we can't guess which one will need a specific CSS. Maybe after long hours of work but I use Kendo to avoid them ;) so please let me know when these new feature will be available.

Cheers!

[Dimo]

Hi Thomas,

Internal builds are usually uploaded at least once a week. There is no fixed schedule, so just keep an eye on them in your account.

Regards,
Dimo
Telerik

[Thomas]

Hi Dimo,
Thanks but you mean it will be available in the very next internal build? 

[Dimo]

Yes, of course.

 

Regards,
Dimo
Telerik

[Thomas]

Good news! Thanks :)

[Thomas]

Well, I've waited quite a while for your latest internal build to solve the problem, and I must say I am quite disappointed.
As my problem (see my initial screenshot) was coming from a first child menu - or submenu - your fix doesn't seem to apply as there is this limit to "if they have no child groups".
Can you confirm there is no fix for my problem, and that the changes done in release 2013.2.1104 only applies to simple menu with no child?

Thanks

[Dimo]

Hello Thomas,

HTML elements do not allow content overflow (i.e. expanding of child groups) and scrollability at the same time.

Supporting the discussed scenario will require the Menu child groups to be detached from their parent groups, which will generate a bunch of unrelated lists on the page, instead of one tidy hierarchical structure. In addition to being a major breaking change with negative side effects, the feature requires significant rework of the whole Menu implementation. I am afraid we do not see this justified currently.

What we have implemented as a fix is: the Menu checks if the expanded group has child groups, and if there are none, the widget applies a couple of styles that will trigger a scrollbar if needed.

Regards,
Dimo
Telerik