Ionic-framework: resize modal based on content

[Balaraju1]

few components are displayed in modal. Few Components have smaller content and few are larger. So i want the modal height and width to resize based on the content. but, current behavior modal will taken fixed --width:600px; and fixed --height:500px; . there variables change to --width:auto; --height:auto;
dialog hidden.
can anyone tell me alternative?

[dylanvdmerwe]

Can't you specify a call to control the size of the modal using the cssClass property?

You also can modify the modal's css vars.

[paulstelzer]

Just add cssClass: 'auto-height' 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> with <div class="inner-content"></div> to make it work

[Balaraju1]

@paulstelzer height was change dynamically based on content. but, width was not increasing based on content..

[paulstelzer]

The width you have to change yourself. This cannot be dynamically based. You have to set width / min-width and max-width

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.