Ionic Modal bottom padding

1

Hi all,

I can’t manage to set a bottom spacing between my modal and the screen’s bottom limit! In my CSS, I’ve set the “ion-modal-view” elements CSS height and width to some percentage and gave values to left, right, top and bottom accordingly, everything works as expected, my modal is centered, but I can’t detach it from the bottom.

Any help?

2

Finally, I’ve managed to get it working by wrapping my ion-modal-view with a div that applies a min-height: 0; CSS directive on the modal class, this made my custom margin effective.

<div class="adic-modal">
    <ion-modal-view class="adic-popup">
        <!--some content-->
    </ion-modal-view>
</div>

This is the CSS:

.adic-modal .modal {
    min-height: 0 !important;
}

.adic-popup {
    width: 90%;
    height: 60%;
    top: 20%;
    bottom: 20%;
    right: 5%;
    left: 5%;
    background-color: #ffffff;
}

I need to know though if what I did is the right approach.

3

This may be the same as this topic:

1 Like
4

Whoops! Thanks for the link, I googled this site for a similar issue before digging into my own code, but apparently my google-foo is a bit out dated. Thanks for sharing :smile:

1 Like