2

I have a mat-card structure , that on mat-dialog-content has the following styles:

margin: 0;
padding: 0;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
min-height: 328px;
max-height: 328px;

The issue I am having is that no matter what I tried on the structure you see in the link, I can't push the mat-card to have 100% height, not even with !important.

Is there something I'm missing? It's not the first time I encounter this issue working with Angular Material and it's starting to get frustrating without being able understand it and work around it.

Thanks in advance!

Iulian
  • 31
  • 3
  • What’s the height of element with class `left-panel` and its parent? – Rana_S Jul 28 '22 at 01:47
  • Are you trying to set the CSS of the entire component, or an inner piece of it? If it is an interior piece, please see my answer on overriding the CSS of external components: https://stackoverflow.com/a/72843273/12914833 If it is the entire component, please provide the HTML and CSS (including selectors) to reproduce the issue. Please explain what you want to happen as well, 100% of what? – Chris Hamilton Jul 28 '22 at 01:49
  • @Rana_S starting from mat-dialog-content down (including mat-dialog-content) I tried to give 100% height of all elements. Didn't worked. The mat-card element received a fixed height (in px) from I don't know where but I could see it only in Chrome when checking the "Computed" tab in inspector. So the work-around I found was to give mat-card fixed height. – Iulian Jul 29 '22 at 12:57
  • @ChrisHamilton I tried to push the mat-card element to have 100% height of it's parent, and of course, his parent 100% height of his parent, and so on until I could fill the dialog in which they were placed, but didn't worked due to some fixed height the mat-card received from I don't know where... see my other comment. I know about encapsulation, I don't think it is the case here. – Iulian Jul 29 '22 at 13:03
  • In that case you can give height to the element with `!important;` to override. – Rana_S Jul 29 '22 at 13:38

1 Answers1

0
.mdc-card {
  width: 100%;
  height: 100%;
  align-items: space-between;
  justify-content: stretch;
}

.spacer {
  flex: 1 1 auto;
}

<mat-card>
  <mat-card-content>
    ...
  </mat-card-content>
  
  <div class="spacer"></div>
  
  <mat-card-actions fxLayoutAlign="space-between">
  ...
  </mat-card-actions>  
</mat-card>
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Анастасия Анисимова
  • 1
  • 1
  • 1
    try explaining your answer – Junaid Shaikh Feb 14 '23 at 13:13
  • Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Feb 15 '23 at 19:05
  • I use "@angular/material": "^15.1.3", there is a .mdc-card class for if you add the above options for it, and put the in a grid container , for example div { width: 100%; display: grid; mesh gap: 1rem; grid-template columns: repeat(2, 1fr); } the card will have a rubberized height and width. .spacer is needed in the place of stretching I hope I was able to clarify the issue. – Анастасия Анисимова Feb 19 '23 at 20:11