andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

fix: card grid grid gets streched if vertical space is not used fully

Browse Source 
Fixed by adding a container for the card grid.
That way the actual card grid has no height and
is therefore not streched vertically.
This commit is contained in:
Andreas Huber
2019-11-17 19:57:05 +01:00
parent 5341b5e307
commit 90331bd029
2 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
pdb-js/src/app/gallery-view/gallery-view.component.html
View File

@@ -20,11 +20,14 @@
<pdb-gallery-filter-view (valueChanged)="filterChanged($event)"></pdb-gallery-filter-view> <pdb-gallery-filter-view (valueChanged)="filterChanged($event)"></pdb-gallery-filter-view>
</div> </div>
<div <div
*ngIf="show" *ngIf="show"
id="gallery" class="card-grid-container">
class="card-grid-300"> <div
<pdb-gallery-item-view id="gallery"
*ngFor="let galleryItem of filteredSortedGalleryItems()" [data]="galleryItem"> class="card-grid-300">
</pdb-gallery-item-view> <pdb-gallery-item-view
*ngFor="let galleryItem of filteredSortedGalleryItems()" [data]="galleryItem">
</pdb-gallery-item-view>
</div>
</div> </div>

6
pdb-js/src/app/gallery-view/gallery-view.component.scss
View File

@@ -6,13 +6,15 @@
background-color: #f8f8f8; background-color: #f8f8f8;
} }
.card-grid-container {
overflow-y: auto;
height: calc(100% - 4.5em);
}
.card-grid-300 { .card-grid-300 {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 300px)); grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
grid-gap: 10px; grid-gap: 10px;
padding: 10px; padding: 10px;
overflow-y: auto;
height: calc(100% - 4.5em);
} }