Angular material toolbar height issue

Question

I use angular material v. 1.1.0-RC.5. I created simple toolbar

<md-toolbar> </md-toolbar>

When browser width is less than 960p, toolbar change it's height to 48p. It looks logical, although I want my toolbar to be the same height all the time.
But what is really confusing for me - when browser width is less than 500p - toolbar become bigger than just before (56p)!!

One thing I noticed: browser height should be greater than 274p to reproduce this behaviour.

Is it an issue?
And is it possible to disable toolbar resing?

Live example (make sure that content area height is greater than 274p)

Answer 1

You can specify the height in css to solve this issue.

md-toolbar{
 min-height:64px;
 max-height:64px
}

Just try to set height in multiple of 8 as material-design uses all size in multiple of 8.

Working Exmaple. http://codepen.io/next1/pen/pbwjKV

Answer 2

The behavior you experience happens because the orientation media query gets triggered. This bit is from the angular-material.css:

    @media (min-width: 0) and (max-width: 959px) and (orientation: portrait) {
  md-toolbar {
    min-height: 56px; }
  .md-toolbar-tools {
    height: 56px;
    max-height: 56px; } }

@media (min-width: 0) and (max-width: 959px) and (orientation: landscape) {
  md-toolbar {
    min-height: 48px; }
  .md-toolbar-tools {
    height: 48px;
    max-height: 48px; } }

According to this documentation it gets triggered in such cases:

Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.

Also it contains a note which is actually your particular case:

Note: This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.