Ionic 2 How to Change Modal Height and Width

Question

I have a page on my application that has a Modal Page and I want to change the size of that page, I try to use the model property to change it but it will change the size of all the other ones and I want to have different models with different sizes

$modal-inset-min-width

Solution 1

Add this into your app.scss:

.my-modal {
    height: 50%!important;
    width: 50%!important;
} 

Solution 2

If you see inside create method of ModalController, it is:

create(component: any, data?: any, opts?: ModalOptions): Modal;

And here is ModalOptions:

export interface ModalOptions {
    showBackdrop?: boolean;
    enableBackdropDismiss?: boolean;
    enterAnimation?: string;
    leaveAnimation?: string;
    cssClass?: string;
}

So, just add a class to your modal like that:

let modal = this.mModalController.create("YourModalPage","Your data",{
    cssClass: "my-modal"
})

And now you can style for your modal by .my-modal class

Solution 3

I used the suggested approach to launch a modal with 50% height, but I found the problem of not having enabled the backdrop.

//app.scss

.my-modal {
  height: 50%!important;
  transform: translateY(100%);
}

outputs:

so I ended up with:

//app.scss

@include media-breakpoint-down(sm) {
.my-modal {
    ion-backdrop {
      visibility: visible !important;
    }
    .modal-wrapper {
      border-radius: 10px 10px 0px 0px;
      overflow: hidden;
      top: 50%;
      left: 0;
      position: absolute;
      width: 100%;
      height: 50%;
    }
  }
}

that output these views:

I used the breakpoint mixin to keep the modal behavior in 768+ px (tablets, etc).

Hope helps somebody.

Comments

[Nouf]

I try to add the class in page.scss like this .my-modal{ height: 50%!important; width: 50%!important; } but it did not work

[Duannx]

Did you create your modal like above? And was the class added to your element?