Modal without going full-screen


#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

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;
}


#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: