angular - 角度扩展面板标题未与数据对齐
问题描述
我有一个扩展面板,其中标题未与单元格对齐。我什么都试过了。这是我的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>
我的 scss 文件
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 代码都来自那里。标题在那里正确对齐,但不适合我。
解决方案
推荐阅读
- javascript - Flexbox 正在重置/覆盖/更改我为字体定义的所有 CSS 规则。我不知道为什么?
- javascript - 无法将 Gatsby/React 网站部署到 Netlify
- python - 你如何在 Shapely 中编辑多边形的坐标?
- android - Android 11 全屏与协调器布局状态栏间距问题
- reactjs - 使用反应功能组件比较密码和重复密码输入值的问题
- java - Spring Boot:尽管我在@JoinColumn 注释中添加了“NO_CONSTRAINT”属性,但为什么我无法插入条目?
- github-actions - 在 GitHub Action Error/Warning/Notice Messages 中指定参数有什么意义
- image-processing - 通过发布请求发送 .tif
- r - 来自父 UI 输入的模块服务器观察事件
- laravel - 使用 Laravel 基于商店时间表的订单取货系统