CODEWITHSUNDEEP
angularjsangular-material
softshipper
softshipper

Reputation: 34119

Change height of toolbar material design

How can I changed the height of md-toolbar in material design?

http://jsfiddle.net/kostonstyle/gsroofa5/

On the first toolbar I want a height from 30px and tried that:

<md-toolbar style:"height: 30px;">

But it does not work at all. I need a navbar with two bulks, that because of two toolbar.

I try this, but now letter disappear.

http://jsfiddle.net/kostonstyle/r178sp9o/1/

Upvotes: 15

Views: 41386

Answers (5)

Hasnat Ali Raja
Hasnat Ali Raja

Reputation: 61

This worked for me on Angular 8. Put this code in your scss

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

.mat-toolbar-row {
  min-height: 50px !important; 
  height: 50px !important;
}

Replace 'mat' with 'md'

Upvotes: 6

Eric Green
Eric Green

Reputation: 1293

The accepted answer did not work for me. Here is how I got it working in my Angular Material app:

<mat-toolbar color="primary"
     style="min-height: 30px !important; height: 30px !important;">

Upvotes: 8

Kyle Krzeski
Kyle Krzeski

Reputation: 6527

If just setting the min-height doesn't work, like it didn't work for me, you will also have to add in max-height with the same value:

HTML

<md-toolbar class="toolbar"></md-toolbar>

CSS

.toolbar {
  max-height: 30px;
  min-height: 30px;
}

Upvotes: 3

Alex Coroza
Alex Coroza

Reputation: 1757

You can use an inline style like this

<md-toolbar style="min-height:30px">

Use min-height to make the toolbar smaller

Upvotes: 17

user2719890
user2719890

Reputation:

The height of the toolbar can be changed by adding the classes to the md-toolbar.

For a medium sized toolbar add class="md-medium-tall"

For toolbar bigger than the normal add class="md-tall"

You can also inline style the toolbar style="height:50px;"

Upvotes: 10

Related Questions