Changing material2 md-toolbar height

user_3669981 0
Viewed 6554

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):

enter image description here

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?
angular-material2 angular css
5 Answers

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;
  }
}
user_92374970

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;
  }
}
user_39238390

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

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