Question

具有一个简单的角度内容窗口，其中包含一组响应的settigns值。当窗口合拢时，fxLayout会合拢，但我无法使其垂直滚动。我已经尝试过溢流-y并且只是溢流（都带有滚动），但是当内容位于窗口下方时，无法看到它。

我还缺少其他CSS吗？

谢谢。...

卡组件：

   <div class="card">
      <div class="title">{{title}}</div>
      <div class="description">
        <ng-content></ng-content>
      </div>
   </div>

卡片CSS：

.card {
  border-radius: 10px;
  border: 2px solid #bbb;
  margin: 10px 10px 30px 10px;
  padding: 10px;
  overflow-y: scroll;
}
.card .title {
  border-bottom: 1px solid #fff;
  font-weight: 100;
  font-size: 2.5em;
  margin-bottom: 5px;
}
.card .description {
  font-weight: 300;
  font-size: 1.2em;
}

html内容：

<card fxLayout="column" fxLayoutAlign="center center">
  <h2>Settings</h2>
      <div fxLayout="column " >
    <h2>General</h2>
    <div class="icon-form-field" fxFlex="50" >
      <mat-icon color="accent">add_location</mat-icon>
      <mat-form-field fxFlex="100">
        <mat-select [placeholder]="Wing"
                    [ngModel]="settings.wing"
                    (selectionChange)="onWingSelect($event)"
                    name="Wing">
          <mat-option *ngFor="let w of wings" [value]="w.value">
            {{w.label}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div fxLayout="column" fxFlex="50" >
      <div class="icon-form-field" >
        <mat-icon color="accent">my_location</mat-icon>
        <label>Default Map Location</label>
        <span class="flex-spacer"></span>
        <mat-radio-group>
          <mat-radio-button value="norCal" [checked]="settings.norCalMapCenter" (change)="onNorCalMapSelect($event)">NorCal</mat-radio-button>
          <mat-radio-button value="soCal" [checked]="settings.soCalMapCenter" (change)="onSoCalMapSelect($event)">SoCal</mat-radio-button>
        </mat-radio-group>
      </div>
    </div>
<div class="input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
      <div class="icon-form-field" fxFlex="50" >
            <mat-icon color="accent">view_day</mat-icon>
            <label class="slider-label input-lg" style="align-self: center">Sticky Header</label>
            <span class="flex-spacer"></span>
            <mat-slide-toggle
              [checked]="settings.stickyHeader"
              (change)="onStickyHeaderToggle($event)">
            </mat-slide-toggle>
        </div>
        <div class="icon-form-field" fxFlex="50"  >
          <mat-icon class="md-14" color="accent">timeline</mat-icon>
          <label class="slider-label input-lg" style="align-self: center">Display Breadcrumbs</label>
          <span class="flex-spacer"></span>
          <mat-slide-toggle
            [checked]="settings.displayBreadcrumbs"
            (change)="onDisplayBreadcrumbsToggle($event)">
          </mat-slide-toggle>
        </div>
    </div>
    <div class="input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
      <div class="icon-form-field" fxFlex="50" >
            <mat-icon color="accent">check_circle_outline</mat-icon>
            <label class="slider-label input-lg" style="align-self: center">Clear Checkboxes on Open</label>
            <span class="flex-spacer"></span>
            <mat-slide-toggle
              [checked]="settings.clearCheckboxesOnOpen"
              (change)="oncClearCheckboxesOnOpenToggle($event)">
            </mat-slide-toggle>
        </div>
        <div class="icon-form-field" fxFlex="50"  >
          <mat-icon class="md-14" color="accent">terrain</mat-icon>
          <label class="slider-label input-lg" style="align-self: center">Display Legend</label>
          <span class="flex-spacer"></span>
          <mat-slide-toggle
            [checked]="settings.displayLegend"
            (change)="onDisplayLegendToggle($event)">
          </mat-slide-toggle>
        </div>
    </div>


    <div class="input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
      <div fxLayout="column"  fxFlex="50" >
          <h2>Themes</h2>
            <div class="icon-form-field" fxFlex="50" >
              <mat-icon color="accent">brush</mat-icon>
              <mat-form-field fxFlex="100">
                <mat-select [placeholder]="Theme"
                            [ngModel]="settings.theme"
                            (selectionChange)="onThemeSelect($event)"
                            name="Theme">
                    <mat-option *ngFor="let t of themes" [value]="t.value">
                                      {{t.label}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
          </div>
          <div class="icon-form-field" fxFlex="50" >
            <mat-icon color="accent">brightness_medium</mat-icon>
            <label class="slider-label input-lg" style="align-self: center">Auto night mode (from 21:00 to 7:00) </label>
            <span class="flex-spacer"></span>
            <mat-slide-toggle
              [checked]="settings.autoNightMode"
              (change)="onAutoNightModeToggle($event)">
            </mat-slide-toggle>
          </div>
        </div>


        <div fxLayout="column" fxFlex="50">
            <h2>Animations</h2>
          <div class="icon-form-field" fxFlex="50" >
              <mat-icon color="accent">input</mat-icon>
              <label class="slider-label input-lg" style="align-self: center">Navigation whole page transition </label>
              <span class="flex-spacer"></span>
              <mat-slide-toggle
                [checked]="settings.animateWholePageTransition"
                (change)="onAnimateWholePageTransitionToggle($event)">
              </mat-slide-toggle>
          </div>
          <div class="icon-form-field" fxFlex="50" >
            <mat-icon color="accent">open_in_browser</mat-icon>
            <label class="slider-label input-lg" style="align-self: center">Navigation page elements slide up</label>
            <span class="flex-spacer"></span>
            <mat-slide-toggle
              [checked]="settings.pageElementsSlideUp"
              (change)="onPageElementsSlideUpToggle($event)">
            </mat-slide-toggle>
          </div>
        </div>
      </div>

    </div>

    <button class="mat-raised-button" routerLink="/home"     (click)="close()">Close</button>
  </card>

屏幕截图：

Answer 1

打开对话框时尝试以下操作：

const dialogRef = this.dialog.open(wizardComponent, {
  width: '800px',
  maxHeight: '70vh',
  data: { wizardData },
});

角度内容不会滚动

1 个答案: