CODEWITHSUNDEEP
cssangulartypescriptangular-material
Icaro Boa Nova
Icaro Boa Nova

Reputation: 95

Is there a way to keep the content inside a mat-card responsive?

Basically I have this mat-card:

<mat-card>
 <mat-card-content>
      <div *ngFor="let siteSource of siteSources | paginate: { itemsPerPage: 5, currentPage: page};">
        <site-details [site]='siteSource'></site-details>
      </div>
    </mat-card-content>
</mat-card>

And for each element I have this HTML:

<div *ngIf="site" class="col-xs site-details">
  <div>
    <tr>
      <td class="col-sm-6"><label>http://www.{{site._source.url}}.com.br</label></td>
      <td class="col-sm-2">
        <a routerLink="editSite/{{site._id}}" style="text-decoration: none; color: white"
          routerLinkActive="active">
          <button mat-raised-button color="primary">
            Editar
          </button>
        </a>
      </td>
      <td class="col-sm-2"><button mat-raised-button color="warn"
          (click)="openConfirmationDialog('excluir',site._source.url)">Excluir
        </button></td>
      <td class="col-sm-2"> <a target="_blank" href="http://www.{{site._source.url}}.com.br" title="Ir ao site"><button
            mat-raised-button>Ir ao site</button></a>
      </td>
    </tr>
  </div>
  <hr>
</div>

<router-outlet></router-outlet>

The problem is that when I change to the mobile vision my buttons get out of the mat-card:

Is there a way to keep the content inside the mat-card equally responsive?

Upvotes: 2

Views: 1640

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15031

There are a few things going on

  • you're using table (tr, td) which is not responsive, for responsiveness, you'd have to use divs
  • the classes you use are bootstrap classes, which will work with <div> if you include the Bootstrap CSS (which i did in index.html)
  • the col-sm-6 or col-sm-2 combinations (from Bootstrap) wouldn't work with Angular-material card because the card has a maximum width of 400px... whilst, the col-sm grid classes are applied when the the width is between 576px - 768px
  • so we apply the col-[99] classes, since width is less than 576px
  • we can override the padding & default min-width for very small screens (card-fancy-example.css) but such designing will be unlike standard angular-material design

check the demo here - note: I removed the router-outlet just to avoid setting up routing for the sample;

Upvotes: 1

Related Questions