locked
Angular mat-list-item occupy the entire first column cell RRS feed

  • Question

  • 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;
    }


     

    Tuesday, March 19, 2019 12:50 PM

All replies

  • User-1174608757 posted

    Hi, comicrrage

    mat-list
    mat-list-item

    According to your description,could you post the code behind about these component? It will help us to reproduce your problem. 

    Best Regards

    Wei

    Wednesday, March 20, 2019 1:59 AM