Cards
Clever Geek Handbook

Change material2 md-height of toolbar

I have one <md-toolbar>

and I want to change its height.

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

I just tried this in mine component.scss

:

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

But the text is filling incorrectly (there is more space at the top than at the bottom):

enter image description here

I tried installing padding

and margin

on 0

, but it didn't make any changes.

My questions

  • How can I adjust the annoying space so that the text is perfectly vertical?
  • What's the best way to update the height md-toolbar

    ?
+3


source to share


5 answers


Adding vertical-align: middle;

to text should be centered vertically.



0


source


You can use Angular's flex layout module:



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


source


Inside the toolbar there is a predefined default string. You also need to change the line height:

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

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


source


If you are using <mat-toolbar>

you can add to your CSS file

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


source


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 shown below ...

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


source






More articles:


All Articles