IonModal With Dynamic Height

Ionic Framework Ionic Vue
1

Is there way for IonModal to dynamically adjust its height according to its content?

For example, min height could be 200px and max height 90%, but everything in between adjusts accordingly so the user doesn’t have excess whitespace at bottom or need to scroll to see lower content?

2

Here is the solution that I did found here.

<ion-modal css-class="auto-height">
    <div class="inner-content">
        <!-- Stuff here -->
   </div>
</ion-modal>

ion-modal.auto-height {
    --height: auto;
}
ion-modal.auto-height .ion-page {
    position: relative;
    display: block;
    contain: content;
}
ion-modal.auto-height .ion-page .inner-content {
    max-height: 80vh;
    overflow: auto;
}
2 Likes
4

Thanks for the reply @twestrick. :+1:

We also have ion-header and ion-toolbar in our modals, with the above styling the toolbar is visible but the content is not. Any ideas why?

5

To be honest I am not sure. I couldn’t get it to work with ion-content either. I was hoping to use it so it would show proper scrollbars. I decided to come back to it in the future once our MVP is done. It would be nice if ion-modal supported auto height without having to “hack” it.

3 Likes