Make the menu scrollable

[SebastianStehle]

What problem does this feature solve?

Hi, I am evaluating ng-zorro and it looks awesome, but i have a few menus with a lot of items. Is there a way to make them scrollable?

What does the proposed API look like?

There is no need a for an API change

Example screen with shows the issue:

[vthinkxie]

try add a classname to the ul, it should work

[SebastianStehle]

What do you mean with classname? Any classname?

[SebastianStehle]

I have already tried this:

.submenu {
    overflow-y: auto;
    background: red;
}

(therefore the red color)

[vthinkxie]

overflow needs to work with at least a height value
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

[SebastianStehle]

I know, but I do not want to give the menu a fixed height, because I do not know the offset from the top nor the height the of the window.

Therefore the feature request to solve it with inside the component. The component should calculate if it overflows the window and then set the height accordingly and add overflow-y: auto or so.

[ahmdelgmil]

Remove/Comment height in this classes .inner-content , .app-layout inside \src\app\app.component.css

.app-layout {
/* height: 100vh; */
}

.inner-content {
padding: 24px;
background: #fff;
/* height: 100%; */
}

or if you want to scroll in inner-content div
add overflow-y: scroll; in class inner-content
.inner-content {
padding: 24px;
background: #fff;
height: 100%;
overflow-y: scroll;
}