Ionic make modal page fit content height

Issue

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

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

Answered By - Samiullah Khan