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:

I made this by adding a custom class while presenting modal

      component: AwesomeComponent,
      cssClass: 'small-modal',
      backdropDismiss: true

and than defined the scss/css in global.scss

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