Issue
I am trying to place a secondary mat toolbar under the main mat tool bar but its too large
I want it to look like this. The thin gray toolbar highlighted in red. Instead its a large toolbar underneath that. Also I need the words "Custom Toolbar 2" to be text center
<mat-toolbar color="primary" class="mat-elevation-z24 topo"
[style.margin-bottom]="'24px'">
<mat-toolbar-row>
<span>Custom Toolbar 1</span>
</mat-toolbar-row>
</mat-toolbar>
<mat-toolbar>
<mat-toolbar-row>
<span>Custom Toolbar 2</span>
</mat-toolbar-row>
</mat-toolbar>
Solution
You can use some css styling
<mat-toolbar color="primary" class="mat-elevation-z24 topo">
<span>Custom Toolbar 1</span>
</mat-toolbar>
<mat-toolbar style="height: 24px; background-color: #ccc; justify-content: center">
<span>Custom Toolbar 2</span>
</mat-toolbar>
I have used inline styling for simplicity. You may however use a css class to define the same.
Also, suggest to remove the mat-elevation-z24
class which casts a 24px shadow
Answered By - T. Sunil Rao
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.