Ionic 2 modal 未填充预期空间答案

【问题标题】：Ionic 2 modal does not fill intended spaceIonic 2 modal 未填充预期空间
【发布时间】：2018-01-06 05:40:34
【问题描述】：

我正在为 ionic 2 创建一个动态模式，以便在我的模式页面中放置少量数据，如下所示：

<ion-list>
  <div *ngFor="let propertyInfo of modalOptions.inputMetadata">
    <inline-edit [(ngModel)]="modalOptions.entity && modalOptions.entity[propertyInfo.propertyName]"
                 [label]="propertyInfo.label" [editOptions]="modalOptions.editOptions"
                 [required]="propertyInfo.required" [additionalData]="propertyInfo.additionalData"
                 [type]="propertyInfo.inputType" [componentType]="propertyInfo.componentType">
    </inline-edit>
  </div>
  <ion-list-header>
    <button ion-button full color="secondary">
      Save<ion-icon name="add"></ion-icon>
    </button>
  </ion-list-header>
</ion-list>

当我创建模态时，它出现在屏幕上，但没有填充模态的轮廓空间：

我个人想让它有一个带有关闭按钮的页眉和一个带有保存的页脚，但我的主要问题是如何让这个模式填充预期的空间？

【问题讨论】：

你能发布 CSS 吗？
@robbannn 我只使用默认的 ionic CSS

标签： javascript css angular ionic2 modal-dialog

【解决方案1】：

看起来很简单，我只需要将所有内容都包装在<ion-content>中

<ion-content class="dynamicModal">
  <!--<button outline (click)="close()">Close</button>-->
  <ion-list>
    <div *ngFor="let propertyInfo of modalOptions.inputMetadata">
      <inline-edit [(ngModel)]="modalOptions.entity && modalOptions.entity[propertyInfo.propertyName]"
                   [label]="propertyInfo.label" [editOptions]="modalOptions.editOptions"
                   [required]="propertyInfo.required" [additionalData]="propertyInfo.additionalData"
                   [type]="propertyInfo.inputType" [componentType]="propertyInfo.componentType">
      </inline-edit>
    </div>
    <ion-list-header>
      <button ion-button full color="secondary">
        Save<ion-icon name="add"></ion-icon>
      </button>
    </ion-list-header>
  </ion-list>
</ion-content>

【讨论】：