Ionic Modal Bottom Spacing

I am unable to set the bottom spacing between my modal and the bottom of the screen! In my CSS I set the "height and width" of the CSS elements with height and width as a percentage and gave the values ​​left, right, top and bottom respectively, everything works as expected, my modal center, but I can Detach it from the bottom.

Any help?


source to share

1 answer

Finally I managed to get it working by wrapping mine ion-modal-view

with a help div

that applies the directive min-height: 0;

in the class modal

, this made my custom stock efficient.

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


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 I did the right approach.



All Articles