Search code examples
ng-zorro-antd

Content in drawer cannot scroll

I am trying to use drawer in ant design to display some content. I noticed that when the drawer's placement is left or right, the content can scroll up and down. But when the drawer's placement is top or bottom, the content cannot scroll.

Here is a simple example:

https://stackblitz.com/edit/ng-zorro-antd-start-7tkpcy

In this example, you can see it cannot scroll. But if change the nzPlacement to 'left', then scroll works well.

What's the problem behind of this? And how can I make the scroll work when nzPlacement is at the bottom.

Thanks.

Solution

  • I think that, they might forget to handle this scenario :

    But you can solve that by :

    .ant-drawer-content {
  height: 100%;
  overflow-y: scroll;
}

    And also add encapsulation : ViewEncapsulation.None to reflect the above style in your component

    WORKING DEMO