CODEWITHSUNDEEP
cssangular-material
Chatra
Chatra

Reputation: 3139

Mat-toolbar content alignmnet

I want to have content aligned to left and right in this example.

https://material.angular.io/components/toolbar/examples

I want Icon on the left side, Text in the middle and username on the far right of the row.

How can I do this?

Upvotes: 0

Views: 5388

Answers (1)

Marshal
Marshal

Reputation: 11081

You can do the below to accomplish this.

Move the mat-icon to the top of the container to put it first.

 <mat-toolbar-row>
   <mat-icon class="example-icon">verified_user</mat-icon>

Apply example-spacer class to the text you want in the middle.

<span class="example-spacer">Second Line</span>

Add the following to the example-spacer class in toolbar-multirow-example.css

text-align: center;

User name after that

<span>User Name</span>

Stackblitz

https://stackblitz.com/edit/angular-tesmev?embed=1&file=app/toolbar-multirow-example.html

Upvotes: 5

Related Questions