CODEWITHSUNDEEP
cssangulartypescriptangular-materialmaterial-design
Paul Th.
Paul Th.

Reputation: 187

Mat-Toolbar Align Items (left, center and right)

I developed a toolbar but I can't align elements on the same line, left, center and right.

Does anyone know how I can align these elements?

I notice that the elements with the name Align left are aligned to the left, the align center aligned to the center and the align right aligned to the right.

Thanks

Demo

Code

  <mat-sidenav-content fxFlexFill>  
      <mat-toolbar color="primary">
    <mat-toolbar-row>
      <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
        <mat-icon>menu</mat-icon>
      </button>

      <div fxShow="true" fxHide.lt-md>
        <a href="#" mat-button>Align left</a>
        <a href="#" mat-button>Align left</a>
        <a href="#" mat-button>Align center</a>
        <a href="#" mat-button>Align center</a>
        <a href="#" mat-button>Align right</a>
        <a href="#" mat-button>Align right</a>
      </div>
    </mat-toolbar-row>
  </mat-toolbar>

Upvotes: 12

Views: 19760

Answers (2)

NANDWERE
NANDWERE

Reputation: 161

css. This expands to occupy max available space.

.flexExpand {
    flex: 1 1 auto;
}

in your template use flexExpand utility to separate the items

<mat-toolbar>
<mat-toolbar-row>
 <div >
      <a mat-button [routerLink]="'/accounts'"> Accounts </a>
      <a mat-button [routerLink]="'/create-account'"> Create Account </a>
    </div>
    <span class="flexExpand"></span>
    <div >
      <a mat-button [routerLink]="'/logout'"> Logout </a>
    </div>
    <mat-toolbar-row>
</mat-toolbar>

Upvotes: 16

Emilien
Emilien

Reputation: 2759

Are you looking for something like this ?

<div fxShow="true" fxHide.lt-md fxFlex fxLayout>
  <!-- The following menu items will be hidden on both SM and XS screen sizes -->
  <div fxFlex>
     <a href="#" mat-button>Align left</a>
     <a href="#" mat-button>Align left</a>
  </div>
  <div fxFlex fxLayoutAlign="center center">
     <a href="#" mat-button>Align center</a>
     <a href="#" mat-button>Align center</a>
  </div>
  <div fxFlex fxLayoutAlign="flex-end center">
     <a href="#" mat-button>Align right</a>
     <a href="#" mat-button>Align right</a>
  </div>
</div>

Upvotes: 7

Related Questions