CODEWITHSUNDEEP
htmlangularcssflexboxangular-material
Avinash
Avinash

Reputation: 107

How to apply css flex concept to angular material

My css code for navigation drawer

:host{
    display: flex;
    background-color: #f0fff0;
    flex-grow:1;
}

.body-style{
    padding: 20px;
    min-height: 100px;
    flex-grow: 1;
}

HTML:

 <mat-drawer-container >
    <mat-drawer #drawer [mode]="over">I'm a drawer</mat-drawer>
    <mat-drawer-content>
            <button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button>
        <div class="body-style"> 
            <router-outlet>

            </router-outlet>
        </div>
    </mat-drawer-content>
  </mat-drawer-container>

I am obviously missing something in Flexbox concepts. The <mat-drawer-content>'s width is small.

Upvotes: 0

Views: 626

Answers (1)

user4676340
user4676340

Reputation:

Don't reinvent the wheel.

Angular team has already covered your need with Flex-Layout.

Once installed, it gives this : 

<mat-drawer-container >
  <mat-drawer #drawer [mode]="over">I'm a drawer</mat-drawer>
  <mat-drawer-content fxLayout="row" fxLayoutAlign="start center">
    <button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button>
    <div class="body-style"> 
      <router-outlet></router-outlet>
    </div>
  </mat-drawer-content>
</mat-drawer-container>

No CSS required.

Upvotes: 2

Related Questions