Actions overflow in top app bar when dismissable drawer is open

[thdk]

What MDC Web Version are you using?

latest (included in codepen) (0.41.0 ?)

What browser(s) is this bug affecting?

Chrome 70

What OS are you using?

Windows 10

What are the steps to reproduce the bug?

https://codepen.io/thdk/pen/BGbjoY

What is the expected behavior?

Action on the right side of the top app bar should remain visible when the dismissable drawer is open

What is the actual behavior?

The actions are pushed to the right outside the viewport when the dismissable drawer is open

Any other information you believe would be useful?

Many related issues which are all closed /merged #2750 #3417 #3563

Closed drawer, icons are visible

Open drawer, icons of actions in top app bar are gone

[abhiomkar]

hi there, You'll need to set top app bar's position to absolute so that it'll be absolutely positioned relative to mdc-drawer-app-content element.

Here is the fix on codepen.

[thdk]

@abhiomkar thanks! I'll test it out immediately.

Do you know if this is documented somewhere?

[thdk]

Just found it: Usage with Top App Bar

https://material.io/develop/web/components/drawers/

In cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.

body {
  display: flex;
  height: 100vh;
}

.mdc-drawer-app-content {
  flex: auto;
  overflow: auto;
}

.main-content {
  overflow: auto;
  height: 100%;
}

.app-bar {
  position: absolute;
}