Modal without going full-screen

Ionic Framework ionic-v3
1

Hi All,

Is there a way to make a modal UI without it having to take up the full screen? Or is this something I’d have to hack in SCSS?

Here’s an example in Ionic v1:

What I’d really like to do is create a modal that’s not full screen for larger media devices (laptop/desktop/tablet), but it’s ok to go full screen for smaller devices (phones).

Thanks,
Ryan

2

you can try changing css for modal wrapper

ion-modal {
    .modal-wrapper {
        height: 70%;
        width: 60%;
    }
}

this worked for me

3 Likes
3

Hi @piyukore,
I want to resize only one modal in my app leaving all others to occupy full screen. Is there a way to achieve it.

4

Having the same issue, anyone?

Adding in app.scss the following affects all modal screens, I want to do it for just one modal…

.modal-wrapper{
position: absolute;
width: 90vw;
height: 50vh;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 0;
}

2 Likes
5

There is an open issue on github for this.

6

I noticed that it goes full screen when the app’s dimensions are small (phone, tablet, or a small browser window), and it doesn’t take up the full screen when there’s a lot of screen space.

7

Same issue here. When squeezing the screen to mobile sized, the modal becomes full screen.

Any solutions?

8

It seems to be done by design.

9

+1 having the same issue.

10

Here you go. I documented these two posts. One for the css layout and another post to achieve the transition effect:

11

I made this by adding a custom class while presenting modal

this.notifyService.presentModal({
      component: AwesomeComponent,
      cssClass: 'small-modal',
      backdropDismiss: true
});

and than defined the scss/css in global.scss

.small-modal{
    .modal-wrapper {
        position: absolute;
        bottom: 0;
        min-height: initial;
        top: initial;
        height: 50%;
    }
}
5 Likes