Ionic 框架 6 中的模态调整大小答案

【问题标题】：Modal Resize in Ionic framework 6Ionic 框架 6 中的模态调整大小
【发布时间】：2022-06-13 15:49:03
【问题描述】：

我正在为我的应用程序使用 Ionic 框架 6 和 Angular 13。我想在此调整离子模式的大小。我试图在创建的同时传递一个全局类。它不工作。我试图调整包装类的大小。它在以前版本的 Ionic -5 中工作。但不是在这里。请帮忙。提前致谢。

commonService.ts

async createPopup(options) {
    options.componentProps.service = this;
    const ref = await this.modalController.create({
      component: AppModalPopupComponent,
      ...options
    });
    if (!this.modalPopup?.length) { this.modalPopup = []; }
    this.modalPopup.push(ref);
    ref.present();

    return ref;
  }


component.ts


this.modalService.createPopup(
      {
        backdropDismiss: true,
        componentProps: {
          header: 'Update Banner in My Queue',
          component: AppUpdateImagePopoverComponent
        },
        cssClass: "image-popup-modal-css"
      });```

Global.scss

.image-popup-modal-css {
  height: 100%;
  width: 100%;
  color: var(--app-secondary-color);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image-popup-modal-css .modal-wrapper {
  display: grid;
  grid-template-columns: auto;
  grid-auto-rows: minmax(min-content, max-content);
  height: 100%;
  border-radius: 10px;
  margin: 20px;
  position: absolute;
  top:0
}

【问题讨论】：

请分享您的代码或输出
@RaviAshara，请看一下。即使使用包装类我也无法控制高度

标签： angular ionic-framework modal-dialog

【解决方案1】：

在 ionic 5 中我使用的是这个：

.example-modal {
  align-items: center;
  justify-content: center; 
  .modal-wrapper { 
    --height: 80%; 
    --width: 50%;   
  }
}

在 Ionic 6 中我改成了这个

.example-modal {
  align-items: center;
  justify-content: center; 
  &::part(content){
    width: 80%;
    height: 50%; 
  }
}

【讨论】：

谢谢@nicolas acerenza。它对我有用
在最新的 ios 版本中运行良好，但旧设备仍然存在同样的问题
如何设置自动高度？ height: auto; 似乎不起作用。

【解决方案2】：

所有版本都可以正常工作

.example-modal {
  align-items: center;
  justify-content: center;
  --min-height: 80%; 
  --min-width: 50%;
  --max-height: 80%; 
  --max-width: 50%;
}

【讨论】：