Angular заголовки панели расширения не выровнены с данными - PullRequest
Новая
       4

Angular заголовки панели расширения не выровнены с данными

0 голосов
/ 13 января 2020

У меня есть панель расширения, где заголовки не выровнены по ячейкам. Я перепробовал все. Вот мой html файл: 

<div class="container-fluid">
      <mat-accordian displayMode="flat" multli class="mat-table">
      <section class="mat-header-row">
        <span class="mat-header-cell" class="col1">Sent to FIS</span>
        <span class="mat-header-cell" class="col2">FIS Report Name</span>
        <span class="mat-header-cell" class="col3">Azure File Name</span>
        <span class="mat-header-cell" class="col4">Number of Records</span>
      </section>
      <mat-expansion-panel *ngFor="let report of reportBatches">
        <mat-expansion-panel-header class="mat-row">
          <mat-panel-description class="mat-cell" class="col1">{{report.sentToXXX}} </mat-panel-description>
          <mat-panel-description class="mat-cell" class="col2">{{report.remoteFileNameOnFTA}} </mat-panel-description>
          <mat-panel-description class="mat-cell" class="col3">{{report.adlsFullPath.substring(report.adlsFullPath.indexOf('part'))}}</mat-panel-description>
          <mat-panel-description class="mat-cell" class="col4">{{report.numberOfRecords}}</mat-panel-description>
        </mat-expansion-panel-header>
        <mat-list>
          <mat-list-item><b>File Size : </b> {{report.contentLength}}</mat-list-item>
          <mat-list-item><b>Date Last Modified :</b> {{report.creationDate | date}}</mat-list-item>
          <mat-list-item><b>Data Path :</b> {{report.dataPath}}</mat-list-item>
          <mat-list-item><b>Batch Version :</b> {{report.version}}</mat-list-item>
          <mat-list-item><b>Batch Source :</b> {{report.source}}</mat-list-item>
        </mat-list>
        </mat-expansion-panel>
    </mat-accordian>
  </div>
</div>

мой файл s css 

col1 {
  width: 5%;
  padding: 5px 5px 10px 0px;
}

.col2 {
  width: 30%;
  padding: 5px 30px 10px 30px;
}

.col3 {
  width: 65%;
  padding: 5px 30px 10px 80px;
}

.col4 {
  width:10%;
  padding: 5px 0px 10px 30px;
}

.mat-accordion .mat-header-row {
  //padding-left: 1.5rem;
  //padding-right: 2rem;
  //border-bottom: none;
}

.mat-expansion-panel-header.mat-row {
  border-bottom: none;
  flex-basis: 0;
}

.mat-expansion-panel-header.mat-row {
  border-bottom: none;
  //flex-basis: 0;
}

//.mat-expansion-panel-header-description {
//  justify-content: space-between;
//  align-items: center;
//}

//copied from https://github.com/angular/material2/blob/master/src/lib/table/table.scss
$mat-header-row-height: 56px;
$mat-row-height: 48px;
$mat-row-horizontal-padding: 24px;

.mat-table {
  display: block;
}

.mat-header-row {
  min-height: $mat-header-row-height;
}

.mat-row {
  min-height: $mat-row-height;
}

.mat-row, .mat-header-row {
  display: flex;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  align-items: center;
  padding: 0 $mat-row-horizontal-padding;
  box-sizing: border-box;

  &::after {
    display: inline-block;
    min-height: inherit;
    content: '';
  }
}

.mat-cell, .mat-header-cell {
  flex: 1;
  overflow: hidden;
  word-wrap: break-word;

}

.mat-list-item {
  font-size: 14px;
  color: gray;
}

Я использовал этот пример , поэтому большая часть css код оттуда. Заголовки там правильно выровнены, но не для меня.

...