material 扩展面板以外的内容

Question

我正在使用 Material 扩展面板来保存一些内容，当扩展面板打开（展开）时，我试图在复选框中显示 2 列数据。它似乎工作正常但是当我向两列添加 css class 以便它们并排放置时，扩展面板会调整到大小并且它们两列直接离开边缘。

<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 中删除 classes（col-1 和 col-2），那么内容在扩展面板上很合适，因为面板中的长度会调整为内容。但是对于 classes，面板不会拉伸，内容会直接从面板中消失...如果您能提供帮助，我们将不胜感激。

Answer 1

在这种情况下我会选择 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;
}

material 扩展面板以外的内容

Content going beyond material expansion panel

angular-material

angular