CODEWITHSUNDEEP
cssangularangular-material2
TheUnreal
TheUnreal

Reputation: 24462

Changing material2 md-toolbar height

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?

Upvotes: 4

Views: 6705

Answers (5)

Jim Clark
Jim Clark

Reputation: 21

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

Upvotes: 2

Wael Ouni
Wael Ouni

Reputation: 117

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

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

Upvotes: 0

abedfar
abedfar

Reputation: 1999

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

Upvotes: 0

user4676340
user4676340

Reputation:

You could use the flex layout module from Angular : 

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

Upvotes: 0

Pim
Pim

Reputation: 948

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

Upvotes: 0

Related Questions