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?

Answer 1

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>