Modifier la hauteur de la conception des matériaux de la barre d’outils

Question

Comment puis-je changer la hauteur de md-toolbar dans la conception des matériaux? 

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

Sur la première barre d'outils, je veux une hauteur de 30px et j'ai essayé ça:

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

Mais ça ne marche pas du tout. J'ai besoin d'une barre de navigation avec deux blocs, à cause de deux barres d'outils.

J'essaye ceci, mais maintenant la lettre disparaît.

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

Answer 1

La hauteur de la barre d’outils peut être modifiée en ajoutant les classes au md-toolbar.

Pour une barre d'outils de taille moyenne, ajoutez class="md-medium-tall"

Pour la barre d’outils plus grande que la normale, ajoutez class="md-tall"

Vous pouvez également insérer un style dans la barre d’outils style="height:50px;"

Answer 2

Vous pouvez utiliser un style en ligne comme celui-ci

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

Utilisez min-height pour réduire la barre d’outils

Answer 3

La réponse acceptée n'a pas fonctionné pour moi. Voici comment je l'ai obtenu dans l'application Angular Material:

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

Answer 4

Si le simple réglage du min-height ne fonctionne pas, comme si cela ne fonctionnait pas pour moi, vous devrez également ajouter dans max-height avec la même valeur:

HTML

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

CSS

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