Ionic 4 modal size

#1

Hi, I’m trying to change the height of a modal with css but it’s not working. In v3 this code worked:

ion-modal {
    position: absolute;
    top: 80%;
    display: block;
    height: 20%;
}

In v4 I tried like this (shared-modal is de cssClass defined for the modal):

.share-modal .modal-wrapper {
  --height: 20%;
  position: absolute; 
  top: 80%;
  display: block;
}

Is there a way to change de size of modal in ionic 4? Thanks.

#2

Hi!

This is my working example below in Ionic 4. Have you added the css-style in global.scss?

For example, in your ts.file:

constructor (private modalController: ModalController) {
}

async openMyModal() {
  const myModal = await this.modalController.create({
    component: MyModalPage,
    cssClass: 'my-custom-modal-css'
  });
  return await myModal.present();
}

Then in your scss (preferably your global.scss/app.scss:

.my-custom-modal-css .modal-wrapper {
   height: 20%;
   top: 80%;
   position: absolute; 
   display: block;  
}

This should absolutely work :slight_smile: check if there is some small detail missing elsewhere.

6 Likes
#3

Thanks, I’ve tried to put this in everywhere but global.scss, and there it’s worked.

1 Like
#4

:man_dancing::man_dancing::man_dancing::man_dancing:
Thanks

#5

is it possible to place it inside ModalPage.css?