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

【问题标题】：Ionic make modal page fit content height离子使模态页面适合内容高度
【发布时间】：2018-04-08 22:27:33
【问题描述】：

我构建了一个类似于自定义警报的模式页面。我需要在警报中添加图像，所以我按照这个来制作自定义警报窗口：How to make customized alert in ionic 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>

编辑：

当上面的类被设置为模态时，它看起来像这样（但有一个图像、文本和一个按钮）：

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

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

【问题讨论】：

你可以为你的模态设置一个类和样式
我在模态框上应用page-modal-alert 类。知道如何编辑该类以使其动态适应内容吗？
对不起，我上面的评论不清楚。您可以通过this way 为模态设置一个类。然后，您可以按该类设置样式。但是，如果您希望您的模态适合内容（如果我理解正确的话），这是不可能的，因为模态被放置在您的页面之外并且与您的页面没有任何关系。所以如果你仍然想要一个适合你的内容的模态，你应该在你的页面中创建你自己的模态，不要用户ModalController
@Duannx 感谢您的回复和有用的链接。我编辑了这个问题，希望它会更清楚。

标签： css ionic-framework sass ionic2

【解决方案1】：

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

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;
}

【讨论】：

好主意。不是我真正想要的，但它让我到达了我需要的地方
@TadijaBagarić 最好为不同的模态使用不同的 cssClass。因为不可能动态地做到这一点。
height: auto 似乎不适用于 ionic 5。它仅在高度为 px 值时才有效。

【解决方案2】：

我个人最喜欢的方法是使用card，然后将您的模态组件的<ion-content> background 设置为transparent。

【讨论】：

尝试过，但在样式、响应性和模态阴影方面遇到了很多麻烦；也许您设法创建了一个解决所有这些问题的 CSS？

【解决方案3】：

经过很多麻烦，我做到了，您可以自定义自己的变体，但它基本上可以完美运行（在 IONIC 3 中，请有人检查并更新 ionic 4强>):

ion-modal {
    @media (min-height: 500px) {
        ion-backdrop {
            visibility: visible;
        }
    }
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $z-index-overlay;
    display: flex;

    align-items: center;
    justify-content: center;

    contain: strict;

    .modal-wrapper {
        &,
        .ion-page,
        .ion-page .content,
        .ion-page .content .scroll-content {
            contain: content;
            position: relative;
            top: auto;
            left: auto;
            padding: 1px;

        }

        z-index: $z-index-overlay-wrapper;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        min-width: $alert-min-width;
        max-height: $alert-max-height;
        opacity: 0;
        height: auto;
        /*
        max-width: $alert-md-max-width;
        */
        max-width:600px;
        border-radius: $alert-md-border-radius;
        background-color: $alert-md-background-color;
        box-shadow: $alert-md-box-shadow;
        border-radius: 5px;
        padding: 5px;

        .ion-page .content {
            background-color: color($colors, light);

        }

        .ion-page{
            overflow-y: auto;
        }
    }
}

【讨论】：

【解决方案4】：

只需添加 '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>

【讨论】：