Ionic make modal page fit content height

Question

I built a modal page that acts like a custom alert. I needed to add an image to the alert so I followed this to make the custom alert window: How to make customized alert in ionic 2?

The problem is that the modal is stretched to fit screen height. Is there a way to make it always fit its own content height? So the height is the minimum it has to be?

this is the scss for the page:

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

Page template:

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>

Edit:

When the class from above is set the modal, it looks like this (but with an image, text and one button):

Text and image contents are dynamic, I change them in run-time so sometimes the fixed height of this modal does not match the actual height of its content.

Is there a way to make the modal height fit to the total height of its contents?

Solution 1

For example your Profile Page has the Update Profile Modal. Let's add custom class to your modal when you are creating it as

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

Now this model is not inserted in the dom as child of Profile Page.

So below code in profile.scss will not work

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

So one way to solve it to add the same code the **app.scss **

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

Solution 2

My personal favorite way to do this si to use a card and then set your Modal component's <ion-content> background to transparent.

Solution 3

After a lot of trouble, I did this, you can custom your own variant but it basically perfectly works (IN IONIC 3, please someone check and update for ionic 4 too):

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

Solution 4

Just add 'auto-height' cssClass and add this css to your 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;
        }
    }
}

Change <ion-content></ion-content> to <div class="inner-content"></div>

View more solutions

Comments

[Duannx]

You can set a class for your modal and style for it

[Tadija Bagarić]

I am applying the page-modal-alert class on the modal. Any Idea how to edit that class so it dynamically fits to content?

[Duannx]

Sorry my comment above is not clear. You can set a class for modal by this way. Then you can style by that class. But if you want your modal fit the content (if i understood correctly), it is impossible because modal is placed out side your page and does not have any relation with your page. So if you still want a modal fit your content, you should create your own modal inside your page, do not user ModalController

[Tadija Bagarić]

@Duannx thank you for your replies and an useful link. I edited the question in hopes it will be clearer.

[Tadija Bagarić]

Cool idea. Not really what I was looking for but it got me where I need to be

[Luca C.]

tried but had a lot of troubles with styling, responsiveness and modal shadows; Maybe you managed to create a css solving all of these?

[Prabhu Anand]

@TadijaBagarić it's better to use different cssClass for different modals. Because it is not possible to do it dynamically.

[MadMac]

height: auto doesn't appear to work on ionic 5. It only works if the height is a px value.