Mat cards not the same length
Question
So I have an app that displays a couple of diseases. As you can see, the cards aren't the same height and i cant seem to fix it.
here is my Html
<div fxLayout="column" fxLayoutGap="2%" fxFlexAlign="stretch"> <mat-card> <mat-form-field> <input matInput (keyup)="filterDisease$.next($event.target.value)" placeholder="filter" type="text" data-cy="filterInput" [value]="filterDiseaseName" /> </mat-form-field> </mat-card> <mat-card class="error" *ngIf="errorMessage" data-cy="appError"> got an error while loading the disease list: {{ errorMessage }} </mat-card> <div *ngIf="diseases$ | async as diseases; else loadingOrError"> <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="0.5%" fxFlexAlign="stretch"> <div class="diseases" *ngFor="let disease of diseases" fxFlex="0 0 calc(25%-0.5%)" fxFlex.xs="100%"> <app-disease [disease]="disease" data-cy="diseaseCard"></app-disease> </div> </div> </div> <ng-template #loadingOrError> <span *ngIf="errorMessage; else loading"></span> <ng-template #loading> <mat-spinner></mat-spinner> </ng-template> </ng-template> </div>
and here is my css
.diseases { height: 100%; }
3 answers
solution1
0 2020-05-22 09:02:59
You're setting the height of diseases to 100% which is not gonna be fixed if you want to set a fixed height use vh or px instead of % maybe do it like this
.diseases {
height: 50vh;
}
solution2
0 2020-05-22 09:50:06
The best solution here is flexbox CSS. FYI, this is a CSS question and should have probably been marked as one.
div{
display: flex;
flex-wrap: wrap;
}
.diseases {
display: flex;
padding: 0.5em;
width: 100%;
}
This will give you a layout of columns which all have the same height.
solution3
-2 2020-05-22 08:57:57
maybe add a refrence to the css file
<head>
<link rel="stylesheet" href="styles.css">
</head>
See if that solves it.
And also set a size in units like px, cm, or a picas(pc) perhaps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.