Changing material2 md-toolbar height

Question

I have one <md-toolbar> and I want to change his height.

<md-toolbar color="primary">Cards</md-toolbar>

I simply tried this in my component.scss :

md-toolbar {
  height: 50px !important;
  min-height: 50px !important;
}

But the text padding goes wrong (space from top is much bigger than the space from the bottom):

I tried to set the padding and margin to 0 but it didn't make any changes.

My questions

1. How I can adjust the annoying space so the text will be vertically centered perfectly?
2. Any better way to update the md-toolbar height?

Answer 1

I ended up adjusting the margin for the container that was below the toolbar to match the height of the toolbar which varied for desktop and mobile as below...

.mat-sidenav-container {
  margin-top: 64px;
  @media (max-width: 720px)
  {
    margin-top: 56px;
  }
}

Answer 2

Adding vertical-align: middle; to the text should center in the middle vertically.

Answer 3

您可以使用Angular的flex布局模块：

<md-toolbar fxLayout="row" fxLayoutAlign="space-between stretch"></md-toolbar>

Answer 4

There's a default predefined row inside the toolbar. You also need to alter that row's height:

md-toolbar {
  height:  50px !important;
  min-height: 50px !important;

  md-toolbar-row {
    height: 50px !important;
  }
}

Answer 5

If you use <mat-toolbar> , you can add in the css file

mat-toolbar{
  margin-top: -10px;
  margin-bottom: -10px;
}