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):
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
?
Adding vertical-align: middle;
to text should be centered vertically.
You can use Angular's flex layout module:
<md-toolbar fxLayout="row" fxLayoutAlign="space-between stretch"></md-toolbar>
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;
}
}
If you are using <mat-toolbar>
you can add to your CSS file
mat-toolbar{
margin-top: -10px;
margin-bottom: -10px;
}
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;
}
}