CODEWITHSUNDEEP
htmlcssangularangular-material-7
wrabarias
wrabarias

Reputation: 383

how to make angular material card to take available vertical space and make it's content scrollable

I'm trying to make a material-card (mat-card) take available space on the screen and then make its content (mat-card-content) scrollable because the items inside the content take more space than the available.

I'd tried with the following CSS but this only is a partial solution since I'm using a fixed height to the content.

.mat-card-content {
    height: 620px;
    overflow: auto;
  }

The problem here are the different screen resolutions so in some it would look fine but other will have a lot of empty space that could be used.

Upvotes: 3

Views: 7845

Answers (3)

Scrimothy
Scrimothy

Reputation: 2536

This can likely be achieved with flexbox.

Simplest way is to do something like this: if you give your card a wrapper with

.card-wrapper {
  display: flex;
  overflow: hidden;
}

Then you should be able to give your card a flex grow and shrink

.card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}
.mat-card-content {
  flex: 1 1 auto;
  overflow: auto;
}

Here's a stackblitz for an example. Check out what I've added to both the styles.css and the app.component.css. You can see that the card's bound always take up the whole app's height and width. If you resize the window it'll either scroll or not. https://stackblitz.com/edit/angular-smp5qu

Depending on your application, you may have to tweak some of these styles to get it working right with any other element you have on the page.

Upvotes: 0

user7974621
user7974621

Reputation:

For scrollable content, try adding the overflow-y property on your element, and setting it to scroll. This causes all vertical overflow on it to be scrollable.

.mat-card-content {
    height: 620px;
    overflow-y: scroll;
}

Source.

For stretching the card to full height, try using height: 100% on the mat-card class.

mat-card {
  height: 100%;
}

Upvotes: 0

wrabarias
wrabarias

Reputation: 383

So this is what I did to solve it:

.mat-card {
  height: 90% !important;
  position: relative;
  overflow: hidden;
}

.mat-card-content {
  max-height: 100%;
  position: absolute;
  overflow: auto;
}

This way my mat-card will take 90% of the available space and then the content will take 100% of the available space of the mat-card. The key here is setting the mat-card position to relative and the mat-card-content position to absolute.

Upvotes: 3

Related Questions