Modal without going full-screen


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).



you can try changing css for modal wrapper

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

this worked for me


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.


Having the same issue, anyone?

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

position: absolute;
width: 90vw;
height: 50vh;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 0;


There is an open issue on github for this.


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.


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

Any solutions?


It seems to be done by design.


+1 having the same issue.


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