离子使模态页面适合内容高度

Question

我建立了一个模态页面,就像一个自定义警报.我需要在警报中添加一个图像,所以我按照这个来制作自定义警报窗口:如何在离子2中进行自定义警报？

问题是模态被拉伸以适应屏幕高度.有没有办法让它始终适合自己的内容高度？那么高度是它必须的最小值？

这是页面的scss:

modal-alert.scss

page-modal-alert {
    background-color: rgba(0, 0, 0, 0.5);
    ion-content.content{
        top: 10%;
        left: 10%;
        width: 80%;
        height: 375px; // <-- fixed
        //height: 75%; // <-- will stretch to screen size
        border-radius: 10px;
        .scroll-content {
            border-radius: 20px;
        }
    }
}

页面模板:

modal-alert.html

<ion-content padding>
  <img src="assets/img/20pointsBox.png">    
  <div>
    <p>{{ text }}</p>
    <ion-buttons>
      <button full ion-button color="secondary" (click)="dismiss()">
        OK
      </button>
    </ion-buttons>
  </div>
</ion-content>

编辑:

当上面的类设置为模态时,它看起来像这样(但是带有图像,文本和一个按钮):

文本和图像内容是动态的,我在运行时更改它们,因此有时此模式的固定高度与其内容的实际高度不匹配.

有没有办法让模态高度适合其内容的总高度？

Answer 1

只需添加 'auto-height' cssClass 并将此 css 添加到您的 global.scss 中：

ion-modal.auto-height {
    &.bottom {
        align-items: flex-end;
    }

    --height: auto;

    .ion-page {
        position: relative;
        display: block;
        contain: content;

        .inner-content {
            max-height: 80vh;
            overflow: auto;
            padding: 10px;
        }
    }
}

改成<ion-content></ion-content>​<div class="inner-content"></div>

Answer 2

例如,您的个人资料页面具有更新个人资料模式.在创建模式时,让我们为您的模态添加自定义类

const modal = this.modalCtrl.create(UpdateProfilePage, {}, { 
    cssClass: 'update-profile-modal'
}

现在这个模型没有作为Profile Page的子项插入到dom中.

所以在profile.scss下面的代码不起作用

profile-page{
    .update-profile-modal .modal-wrapper{
        min-height: 400px;
        height: auto;
    }
}

所以解决它的一种方法是添加相同的代码**app.scss**

.update-profile-modal .modal-wrapper{
    min-height: 400px;
    height: auto;
}