内容超越材料扩展面板
内容超越材料扩展面板
提问于 2021-09-09 06:21:37
我正在使用材料扩展面板来保存一些内容，当扩展面板打开(展开)时，我尝试在复选框中显示2列数据。它似乎工作得很好，但当我向两列添加一个css类，以便它们并排坐在一起时，扩展面板确实会根据大小进行调整，并且两列直接离开边缘。
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
Some header
</mat-expansion-panel-header>
<div class="col-1">
<div *ngFor="let firstname of people.names">
<mat-checkbox (change)="changeFunction(firstname)">
{{ firstname }}
</mat-checkbox>
</div>
</div>
<div class="col-2">
<div *ngFor="let school of people.schools">
<mat-checkbox (change)="changeFunction(school)">
{{ school }}
</mat-checkbox>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>.col-1 {
width: 50%;
float: left;
}
.col-2 {
width: 50%;
float: right;
}如果我从div中删除类(col-1和col-2)，那么内容可以很好地适应扩展面板，因为面板会根据内容的长度进行调整。但是对于类，面板不会伸展，内容会直接离开面板……这里的任何帮助都将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-09-09 08:01:54
在这种情况下，我会选择flex
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header> Some header </mat-expansion-panel-header>
<div class="panel-container">
<div>
<div *ngFor="let firstname of people.names">
<mat-checkbox (change)="changeFunction(firstname)">
{{ firstname }}
</mat-checkbox>
</div>
</div>
<div>
<div *ngFor="let school of people.schools">
<mat-checkbox (change)="changeFunction(school)">
{{ school }}
</mat-checkbox>
</div>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>以及它的css：
.panel-container {
display: flex;
}
.panel-container * {
flex-grow: 1;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69113171
复制相关文章
相似问题
腾讯云开发者
