How to change height of Mat-Card element in angular material design component

Question

I have the following code in angular 5 app. which produces the sequence of mat-card as below image using *ngFor. But the height of all the mat-card is same as the height of first mat-card .

         <div fxLayout="row">
          <mat-card *ngFor="let section1 of sections" fxFlex="33" style="margin: 15px;">
               <mat-card-header>
                    <mat-card-title>{{section1}}</mat-card-title>
               </mat-card-header>
               <mat-card-content>
                    <form>
                      <!-----form data goes here ---->
                    </form>

               </mat-card-content>

         </mat-card>

      </div>

The result is list of mat card as below, but the problem is height of all mat-card is same as height of first mat card in the loop. Is there any way to make it dynamic based on the content it carries?

Solution 1

Adding a fxLayoutAlign="start start" to the container div sets the alignment of the cards to what you're looking for. StackBlitz demo

Flex-Layout fxLayoutAlign API docs

Flex-Layout demo playground

Solution 2

Set fxFlexAlign="stretch" to have all mat-card in same height.

Solution 3

The default behavior of flex-layout is to stretch components across the cross axis. In your case this is the height of the cards. This is controlled by the fxLayoutAlign property which defaults to "start stretch". To change this, add fxLayoutAlign="start start" to your outer <div fxLayout="row">. See the Angular Flex-Layout Demos page for more information.

Comments

[Talk is Cheap Show me Code]

Thanks for the explanation. I need this explanation so that I can use the concept in further development.

[Talk is Cheap Show me Code]

Hey, its working like a charm, Thanks for the Stackblitz demo.