Question

我正在尝试建立一个带有一系列复选框的对话框，并且在全屏模式下，我可以按照下面的方法进行操作并按自己的方式进行操作。

我有一个设置为690px的断点，该断点可以切换到单列模式，并且也可以正常工作。但是，容器div不会收缩以适合窗口，并且复选框都位于该div的中心。见下文：

如果我将窗口缩小到手机大小的屏幕，则主容器div（根据检查人员，它是mat-dialog-container）对于该窗口来说仍然太大，并且我丢失了如下所示的复选框（此外，我没有即使我已在div上设置了max-height，也可以滚动）：

我已经尝试了所有可以想到的方法来更改div的大小以匹配窗口大小，使用fxLayout align将复选框向左移动，但是没有任何效果。我应该尝试使用哪些scss属性a）使主容器适合屏幕大小并b）将div移到div的左侧？

这是我的CSS：

.a-list-title {
  font-family:   Roboto, "Helvetica Neue", sans-serif;
  font-size: 1em;
}
.mat-grid-tile {
  font-size: .8em;
}
.mat-checkbox {
  width: 140px;
  align-self: left;
  align-items: left;
  align-content: left;
  border: 1px solid;
  padding-left: 5px;
  margin: '0 auto';
}
mat-dialog-container {
  width: 60%;
  height: 40vh;
  max-height: 80vh;
}

和html：

<div class="aList-container"
      fxLayout="column"
      fxLayoutGap="10px"
      fxLayoutAlign="start"
       style="width:500px;max-height:50%">

      <div fxFlex style="border: solid 1px;">
          <div class="a-list-title" >
            <h3>AIRCRAFT LIST</h3>
            <hr>
          </div>
      </div>

      <div fxFlexFill fxLayout="column" height="auto" style="border: solid 1px red">

        <mat-grid-list [cols]="breakpoint" rowHeight="30px" gutterSize="0px" (window:resize)="onResize($event)">
            <mat-grid-tile fxLayout="column" *ngFor="let aircraft of aircraftList" >
                <mat-checkbox id="{{aircraft.DeviceName}}">{{aircraft.DeviceName}}</mat-checkbox>
              </mat-grid-tile>
        </mat-grid-list>
      </div>
</div>

任何指针将不胜感激！

Answer 1

原来，我需要为垫子样式设置样式。 .mat-grid-tile .mat-figure的CSS {font-size：.8em; justify-content：left！important;}解决了居中问题。

材质对话框没有响应

1 个答案: