Ionic模态框高度适配内容失效问题求助

问题描述 #

在Angular中使用modalController创建自定义组件形式的Ionic模态框，设置断点后初始显示正常，但上滑后会铺满全屏，希望模态框高度仅适配内容。尝试过设置--height:auto/fit-content、用ion-content包裹组件等方法，要么高度异常要么内容溢出屏幕，求最新Ionic版本的解决办法。

代码示例 #

模态框创建代码 #

public async startNewProject() {
    const modal = await this.modalController.create({
      component: NewProjectTypeComponent,
      breakpoints: [0, .50],
      initialBreakpoint: .50,
      cssClass: 'custom-border-radius-modal',
      handle: false,
    })
    modal.present();
  }

模态框组件模板 #

<ion-grid>
  <div class="top-bar"></div>
  <ion-row class="title-row">
    <ion-label class="main-title">Qual o tipo de projeto?</ion-label>
  </ion-row>
  <ion-row class="row">
    <ion-item (click)="openProjectTitleModal()">
        <ion-icon src="../../../../assets/icon/home-filled-icon.svg"></ion-icon>
        <ion-label>Residêncial</ion-label>
      <ion-icon class="arrow-right" slot="end" src="../../../../assets/icon/arrow-right.svg"></ion-icon>
    </ion-item>
  </ion-row>
  <ion-row class="row">
    <ion-item (click)="openProjectTitleModal()">
      <ion-icon src="../../../../assets/icon/industry-icon.svg"></ion-icon>
      <ion-label>Industrial</ion-label>
      <ion-icon class="arrow-right" slot="end" src="../../../../assets/icon/arrow-right.svg"></ion-icon>
    </ion-item>
  </ion-row>
  <ion-row class="row">
    <ion-item (click)="openProjectTitleModal()">
      <ion-icon src="../../../../assets/icon/suitcase-icon.svg"></ion-icon>
      <ion-label>Escritório</ion-label>
      <ion-icon class="arrow-right" slot="end" src="../../../../assets/icon/arrow-right.svg"></ion-icon>
    </ion-item>
  </ion-row>
</ion-grid>

尝试过的样式 #

ion-modal {
 --height: auto;
}
/* 或 */
ion-modal {
 --height: fit-content;
}

解决办法 #

针对最新Ionic版本（v7+），可通过以下步骤实现需求：

1. 自定义CSS控制模态框容器高度
   在全局样式或组件样式中，针对添加的custom-border-radius-modal类，直接修改模态框内部容器的高度逻辑：

   .custom-border-radius-modal .modal-wrapper {
     height: fit-content !important;
     max-height: 80vh; /* 可选：限制最大高度，避免内容过多时溢出屏幕 */
     width: 100%;
   }
   
   .custom-border-radius-modal ion-modal {
     --height: auto;
     --max-height: 100%;
   }
   

   .modal-wrapper是Ionic模态框的核心容器类，设置height: fit-content可让容器自适应内容高度，配合max-height防止极端场景下内容溢出。

2. 调整断点与滑动行为
   保留原有断点配置，但通过监听滑动事件阻止全屏触发：

   public async startNewProject() {
     const modal = await this.modalController.create({
       component: NewProjectTypeComponent,
       breakpoints: [0, .50],
       initialBreakpoint: .50,
       cssClass: 'custom-border-radius-modal',
       handle: false,
       swipeToClose: true
     })
   
     // 监听滑动事件，阻止过度滑动触发全屏
     modal.addEventListener('ionSwipe', (e) => {
       const progress = e.detail.progress;
       if (progress > 0.6) {
         e.preventDefault();
         modal.dismiss(); // 滑动超过阈值直接关闭模态框，而非放大
       }
     })
   
     modal.present();
   }
   

3. 组件内部避免嵌套ion-content
   当前模板使用ion-grid的结构无需修改，不要嵌套ion-content——ion-content自带全屏高度和滚动逻辑，会破坏自适应高度的效果。

验证效果 #

完成以上设置后，模态框初始高度会精准适配内容，上滑时不会铺满全屏，滑动超过阈值会直接关闭，同时避免内容溢出屏幕的问题。

内容的提问来源于stack exchange，提问作者Alexsandro agustini