0

I am trying to make my responsive for the dynamic data value it gets. I used the below code to make it reponsive

  <div fxLayout="row wrap " fxLayoutGap="50px grid" fxLayout.xs="column" fxLayoutAlign="space-around center" >
    <div class="grid-container">
      <!-- <div > -->
  
        <mat-card  fxFlex="calc(33%-25px)" fxFlex.sm="calc(50%-25px)" *ngFor="let hotel of hotels; let i = index;">
          <mat-card-title>{{ hotel.name }}</mat-card-title>
          <mat-card-subtitle>{{ hotel.address1 }}</mat-card-subtitle>

          <div *ngFor="let room of hotel.roomsList;">
          <mat-card-content >
          
            <!-- <p>Room Details</p> -->
            
            <p style="color: darkcyan;">{{room.type_name}}</p> 
            <p style="color: darkcyan;">{{room.price}}</p> 
          </mat-card-content>
        </div>
        </mat-card>
      <!-- </div> -->
    </div>
  </div>

The output that I get is: output

Its not getting reposonsive for the data i pass. How should i Modify

Nikita Fernando
  • 79
  • 4

1 Answers1

0

In the mat card youre defining the height using fxFlex calc, if the content area gets bigger than the height so the content is getting overflowed..

fxFlex="calc(33%-25px)" fxFlex.sm="calc(50%-25px)"

The answer to your question of making the mat-card responsive is use to use a container div at the mat-card

like this

<div> 
<mat-card>...</mat-card>
</div>

in that div tag add the flex layout api called fxLayoutAlign="start start"

<div fxLayout="row" fxLayoutAlign="start start"> 
<mat-card>...</mat-card>
</div>

thats all the mat card will be responsive

here is a stackblitz example https://stackblitz.com/edit/angular-material2-issue-a2wx8c

all the best!

sudhagar
  • 11
  • 2