diff --git a/src/lib/sidenav/drawer.html b/src/lib/sidenav/drawer.html new file mode 100644 index 00000000000..3ff215408cf --- /dev/null +++ b/src/lib/sidenav/drawer.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/lib/sidenav/drawer.scss b/src/lib/sidenav/drawer.scss index aff6489f6f6..c0630553573 100644 --- a/src/lib/sidenav/drawer.scss +++ b/src/lib/sidenav/drawer.scss @@ -162,6 +162,17 @@ $mat-drawer-over-drawer-z-index: 4; } } +// Note that this div isn't strictly necessary on all browsers, however we need it in +// order to avoid a layout issue in Chrome. The issue is that in RTL mode the browser doesn't +// account for the sidenav's scrollbar while positioning, which ends up pushing it partially +// out of the screen. We work around the issue by having the scrollbar be on this inner container. +.mat-drawer-inner-container { + width: 100%; + height: 100%; + overflow: auto; + -webkit-overflow-scrolling: touch; +} + .mat-sidenav-fixed { position: fixed; } diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts index 3c77a501bad..ebb6a7907df 100644 --- a/src/lib/sidenav/drawer.ts +++ b/src/lib/sidenav/drawer.ts @@ -103,7 +103,7 @@ export class MatDrawerContent extends CdkScrollable implements AfterContentInit moduleId: module.id, selector: 'mat-drawer', exportAs: 'matDrawer', - template: '', + templateUrl: 'drawer.html', animations: [matDrawerAnimations.transformDrawer], host: { 'class': 'mat-drawer', diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index 74f8ef3a94c..28f47becbb5 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/src/lib/sidenav/sidenav.ts @@ -54,7 +54,7 @@ export class MatSidenavContent extends MatDrawerContent { moduleId: module.id, selector: 'mat-sidenav', exportAs: 'matSidenav', - template: '', + templateUrl: 'drawer.html', animations: [matDrawerAnimations.transformDrawer], host: { 'class': 'mat-drawer mat-sidenav',