Ionic - Make certain modals fullscreen

tutorials
1

I’ve seen that a few users are having difficulties making their modals take up the full width and height of the device.
This is a small tutorial to explain how this can be achieved.

  1. You need to write the code to show a modal using the ModalControler:
let modal = this.modalCtrl.create(ArticledetailPage});
  1. Add the cssClass property to the modalOptions when creating the options.
    This can be any name you want, but we will need it later.
    Make sure that the 2nd parameter is undefined if you don’t pass any data.
let modal = this.modalCtrl.create(ArticledetailPage, undefined, { cssClass: "modal-fullscreen" });`
  1. Because a modal gets created outside the scope of a page, we need to define the properties in the global app.scss file. So not in the scss-file of the page you are trying to show in the modal.
    This code will make sure the modal is show fullscreen.
    If you have chosen a different cssClass, have you to change modal-fullscreen to the custom name.
.modal-fullscreen {
    .modal-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
}

Conclusion:
Only the modal with the cssClass of “modal-fullscreen” will be shown fullscreen. Other modals will be unaffected and show according to the size of the device where it is shown.

9 Likes
2

Unfortunately this is not working for me. I made both changes (in app.scss), but it appears just as before. Is it possible that there is something missing anywhere?

3

Can you show me how you present the modal + your code in the app.scss?

4

As you said:
let modal = this.modalCtrl.create(NotenkategorieAddPage, this.klasse, { cssClass: "modal-fullscreen" })
in the .ts-file

and

.modal-fullscreen {
    .modal-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
}

in the app.scss (which was empty before)

2 Likes
5

That’s weird, that should do the trick.

Can you check if the modal gets the “modal-fullscreen” class added to the “ion-modal” element?
You can do this by right-clicking and choosing “Inspect element” in Chrome

6

Oh, thank you for your respond! Inspecting the modal brought me to the point that I’ve added css-class on the wrong place. Works now like a charme.
Thanks for sharing this!

1 Like
7

EDIT (since I can’t edit my first post)

When using this SCSS on iOS, the modal overlaps with the statusbar.
To fix this: add this to app.scss

.ios .modal-fullscreen {
    .modal-wrapper {
        top: 26px;
    }
}
8

Thanks! That worked for me :slight_smile: Now i can style my certain modal as i wish! Thank you sooooo much Ionic Team :slight_smile:

9

you saved my life man!

10

The way that Modals work in Ionic 4 are diferent, Do you know about tutorial for Ionic 4?

11

just the call to modalcontroller is a bit easier, since only options parameter is left in ionic4
works like a charm for me

13 
.ios .modal-fullscreen {
    .modal-wrapper {
        top: 26px;
    }
}

I tried this in global.scss for ionic 5, but it’s not working? Do you have also a solution for ionic 5?
Thanks in advance!