CODEWITHSUNDEEP
angularangular-materialangular-material2
ankur ratra
ankur ratra

Reputation: 131

Angular material 2 card scroll able

how to make the content inside the mat-card material 2 component scroll able ? I did not find anything on the material 2 website

Upvotes: 12

Views: 34969

Answers (4)

j2L4e
j2L4e

Reputation: 7050

You can leverage Flexbox to achieve this:

Add a class scrollable-content to your mat-card to make the content fill the card.

.mat-card.scrollable-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;

  > .mat-card-title-group {
    display: block;
  }

  > .mat-card-content {
    overflow-y: auto;
  }
}

<mat-card class="scrollable-content">
  <!-- the rest of your inner html -->
</mat-card>

Upvotes: 14

Gerard Carb&#243;
Gerard Carb&#243;

Reputation: 1905

Try this. The key point is to set position:absolute in the scrollable div:

.flex {
   flex: 1 1 auto;
}    

.scrollable {
    overflow: auto;
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

<mat-card class="flex">
   <div class="scrollable">
       ...
   </div>
</mat-card>

Upvotes: 4

Michael Nelms
Michael Nelms

Reputation: 38

Here is what I did in my own code.

You can follow a similar approach, but it works.

.css

:host {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}
.policy-card {
  width: 80%;
  min-width: 280px;
  height: 70%;
  min-height: 280px;
  margin: auto;
  font-weight: unset !important;
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  align-content: center;
}
.header-image {
  background-color: #44c2cc;
}
.text-container {
  overflow-y: scroll;
}

.html

<mat-sidenav-container class="container">
<mat-sidenav-content class="content">

<mat-card class="policy-card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Title</mat-card-title>
    <mat-card-subtitle>Subtitle</mat-card-subtitle>
  </mat-card-header>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
  <mat-card-content [style.overflow]="'auto'">
    <p>
        The Shiba Inu is the smallest of the six original and distinct
        spitz breeds of dog from Japan. A small, agile dog that copes very
        well with mountainous terrain, the Shiba Inu was originally bred
        for hunting.
    </p>
  </mat-card-content>
</mat-card>

Upvotes: 1

FAISAL
FAISAL

Reputation: 34673

This is not a built-in feature. To make the contents scrollable, set a height for <mat-card-content> selector. Here is an example: 

<mat-card>
    <mat-card-header>
        <mat-card-title>CARD TITLE</mat-card-title>
    </mat-card-header>
    <mat-card-content [style.overflow]="'auto'" [style.height.px]="'300'">
        <p>
            The Shiba Inu is the smallest of the six original and distinct
            spitz breeds of dog from Japan. A small, agile dog that copes very
            well with mountainous terrain, the Shiba Inu was originally bred
            for hunting.
        </p>
    </mat-card-content>
    <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
    </mat-card-actions>
</mat-card>

Link to StackBlitz demo.

Upvotes: 16

Related Questions