Ionic make modal page fit content height - css

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>

Answer 2

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

Answer 3

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

Answer 4

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