From 2187c08a045cdd16636e00182c0ac029a0ac0896 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Sun, 26 Feb 2017 17:15:47 +0100 Subject: [PATCH] fix(toolbar): incorrect height for soft-keyboards * On some devices, the onboard keyboard (soft-keyboard) causes the CSS orientation to change from portrait to landscape. This causes the toolbar to turn smaller than it should be. As for now, relying on @media orientation should be avoided. * Libraries like MDL or Polymer also ignore the landscape orientation check, and only change heights for mobile and desktop. Fixes #3233 --- src/lib/toolbar/toolbar.scss | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/lib/toolbar/toolbar.scss b/src/lib/toolbar/toolbar.scss index 9354ab842a9c..49240481f0ef 100644 --- a/src/lib/toolbar/toolbar.scss +++ b/src/lib/toolbar/toolbar.scss @@ -51,12 +51,10 @@ $mat-toolbar-padding: 16px !default; // Set the default height for the toolbar. @include mat-toolbar-height($mat-toolbar-height-desktop); -// Specific height for mobile devices in portrait mode. -@media ($mat-xsmall) and (orientation: portrait) { +// As per specs, mobile devices will use a different height for toolbars than for desktop. +// The height for mobile landscape devices has been ignored since relying on `@media orientation` +// is causing issues on devices with a soft-keyboard. +// See: https://material.io/guidelines/layout/structure.html#structure-app-bar +@media ($mat-xsmall) { @include mat-toolbar-height($mat-toolbar-height-mobile-portrait); } - -// Specific height for mobile devices in landscape mode. -@media ($mat-small) and (orientation: landscape) { - @include mat-toolbar-height($mat-toolbar-height-mobile-landscape); -}