How Can I make modal to become full-screen in Ionic2?

Question

Here is my modal code:

    let modal = Modal.create(DailyReportPage);
    this.nav.present(modal);

It works fine on Phone, however on the tablet it looks like this: What I want is to make it look like this:

Answer 1

I apply this style:

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

Answer 2

You can override the related Ionic Sass variables in file variables.css:

$modal-inset-width: 100%;
$modal-inset-height-large: 100%;

Documentation (current version is 3.9, but I use this with 3.7): http://ionicframework.com/docs/theming/overriding-ionic-variables/

Answer 3

You should follow Modal

A Modal is a content pane that goes over the user's current page. Usually it is used for making a choice or editing an item.

So If you want to show full screeen. I think you create new page and push to it

this.nav.push(SamplePage, {item: item});

Answer 4

Apply this style inside your scss file

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

It should be out side of your selector.

ex: -

page-mymodal {
    //page CSS Codes
}
ion-modal {
    .modal-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
    } 
}