Ionic 2 How to Change Modal Height and Width - ionic-framework

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

Answer 1

Add this into your app.scss:
.my-modal {
height: 50%!important;
width: 50%!important;
}

Answer 2

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.

Answer 3

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

Answer 4

Put his Code into your app.scss file
modal-wrapper {
position: absolute;
width: 100%;
height: 100%;
}
#media not all and (min-height: 600px) and (min-width: 768px) {
ion-modal ion-backdrop {
visibility: hidden;
}
}
#media only screen and (min-height: 0px) and (min-width: 0px) {
.modal-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

Answer 5

Modal Controller takes a custom css
let moreInfoModal = this.modalCtrl.create(DesktopMoreInfoPage, {
titles: title,
images: image,
description: description
}, {cssClass: 'custom-class'});
moreInfoModal.present();
Then in your app.scss file
.custom-class {
//your styling goes here
}

Answer 6

Custom css
ion-modal.my-modal {
padding: 10vh 10vw;
}
Custom ts
this.modalCtrl.create(pageName, {myParam:item}, { cssClass: 'my-modal' });