User956626884 posted
Hi,
I have a Angular grid table which have multiple columns. The first column just have the date and I add a mat-list-item with the date which appears near the top of the row cell. The rest of the columns, each row cell contains 30 mat-list-items.
I would like to make the first date column be vertically centered so it sits in the middle/center and occupy the entire cell.
Is there a way to make the date cell occupy the entire row cell? Or do I have to rewrite into something beside a mat-list-item? Thanks.
Here is my angular code. The first div has the date column which the mat-list-item sites at the top. The next div, there is an ngFor which loops thru a collection to insert many rows in a row cell.
<div class="container" fxLayout='row' fxLayoutWrap *ngFor="let data of myData">
/* first column with data */
<div fxLayout="row" fxFlex="9%" fxFlex.gt-sm="9%">
<div fxLayout="column" fxFlex>
<mat-list class="wf-font-list" >
<mat-list-item fxLayoutAlign="center center" class="dateCell" "><span><strong>{{weekly.date | date: 'MM/dd/yyyy' }}</strong></span></mat-list-item>
</mat-list>
</div>
</div>
/* next column with many rows */
<div fxLayout="row" fxFlex="19%" fxFlex.gt-sm="19%">
<div fxLayout="column" fxFlex>
<mat-list class="wf-list">
<div class="ng-container">
<mat-list-item fxLayoutAlign="start" class="date-list-item"><strong><span>Date</span></strong></mat-list-item>
</div>
<div class="ng-container" *ngFor="let displayName of data.displayNames; let i = index">
<mat-list-item fxLayoutAlign="start">
<strong><span>{{displayName.name}}</span></strong>
</mat-list-item>
<div class="ng-container">
<mat-list class="wf-list">
<mat-list-item fxLayoutAlign="start" *ngFor="let label of data.Names">
<span class="indent">{{label}}</span>
</mat-list-item>
</mat-list>
</div>
</div>
</mat-list>
</div>
</div>
here is the css
.dateCell {
background-color: #ffffff !important;
font-size: 16px;
border-bottom: none !important;
border-top: none !important;
}
