Home > Enterprise >  Angular Material: Mat-Card restrict height for display
Angular Material: Mat-Card restrict height for display

Time:11-18

I have layout where on left side there is a mat-table - which is restricted in its height to 4 rows and on the right side a mat-card. The idea is to display the content of a selected row next to the table. Basically it should look like:

enter image description here

I put the two items in a grid layout. The problem I'm facing? If the mat-card-content is far too much it goes over the boundary and looks quite nasty:

enter image description here

I tried to fix it but didn't succeed. How to fix it for this layout? If there is some kind math required for the CSS I would appreciate if the calculation can be tracked - since I need it little bit different in my project.

UPDATE: Forgotten the link for the code

CodePudding user response:

I just add this class and worked!

mat-card-content {
   overflow-y: scroll;
   max-height: 80px;
}

you can change max-height as much as you want.

https://stackblitz.com/edit/angular-wcpe6e-bjfyza?file=src/app/table-basic-example.css

  • Related