How to make the drawer take full height of the screen?

Question

How to make the drawer take full height and the three dots button '...' clickable at the same time. Here is a working demo, when you uncomment line 9 of app.component.ts, the code works fine. But the drawer isn't taking the full height of the screen.

If I remove the position: relative, the drawer will take full screen, but the three dot '...' on navbar is not clickable, does anyone know how to solve the issue? Why it is not clickable once remove the position: relative?

https://stackblitz.com/edit/drawer-antd?file=src%2Fapp%2Fapp.component.ts

Answer 1

add top spacing like this in your .my-drawer class:

/deep/ .my-drawer {
   //position: relative;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   top:45px;
}

Answer 2

You just need to add this CSS

.my-drawer{top: 0;}

Answer 3

Use vh (viewport height). height: 100vh will take 100% of your screen's height

Answer 4

By reading your question one can assume that what you want is this:

.my-drawer {
    pointer-events: none;
}

When you remove position: relative; the drawer overlays the button, so it is just logical that it is not clickable, by applying pointer-events: none; you make the drawer not susceptible to clicks, that way you can click the button either way.

But I doubt that this is the behavior you're looking for. So please update your question for more clarity on what are you trying to accomplish, thank you.

Answer 5

My solution to this currently is:

• Making navbar to display absolute
• Making navbar after the drawer element

https://stackblitz.com/edit/drawer-antd-tknn4t?file=src%2Fapp%2Fapp.component.ts

Answer 6

Try set the drawer's visibility to hidden when it's closed.

[ngStyle]="{ minHeight: this.height + 'px', visibility: !this.state.open ? 'hidden': 'visible' }"