Change size of modal dialog

1

Hi,

I am writing an app where I want the modal view to take up most of the available space like it does in the codepen examples.

When I run it in my iOS emulator, the modal is too small for my purposes.

Is there an easier way of doing this other than overriding the CSS for the modal?

I have tried making my view a normal view however when I do that it goes into the nav history and I don’t want that.

Thanks.

2

So far the easiest way is to modify the ion-modal-view tag css.

<ion-modal-view style="width: 90%; height: 90%;">

You might also want to play with the top, right, left and bottom property as well to centre the modal on screen.
For e.g if the width is 90% and height 90%, it should be 5% from all sides to center it

<ion-modal-view style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;">

If you don’t want to add it as inline, then you can make it into a class.

9 Likes
3

Thank you very much qrider, this works really well.

4

Is there a way to say only make the modal as high as its contents? By default, Im seeing the modal take up the whole height of the screen.

5

As far as I know, you’d have to calculate it to make the modal as high as the content.
A possible way would be to:

  1. Get the height of all child elements
  2. divide the child elements height with screen height (probably add a few pixels here and there for padding purposes) and multiply by a 100 for the percent value.
  3. optional: divide the result by 2 to get the optimal top and bottom values to have it centered vertically

Ofcourse you’d also want to add a condition in this matter if the content is larger than the screen on which youd just want the content of the modal to be scrollable.

Ofcourse there are better and more optimal ways to do it but this is the first idea that came in mind.

If something sounds unclear, feel free to message me back.

6

For me once i build a modal it take the height of the entire screen, even after implementing the changes suggested by @qrider, it worked on the width but the height still remain the height of the screen. Any idea on how to solve this yet? I just want the modal to be an overlay over the main page

1 Like
7

Put into css

@media (min-width: 680px) {
  .mymodal {  
     width: 90%; 
     height: 90%; 
     top: 5%; 
     left: 5%; 
     right: 5%; 
     bottom: 5%;
  }
}

and in the html…

<ion-modal-view class="mymodal">

Regards, Nicholls

2 Likes
8

Easy. Just make the modal transparent.

HTML:
<ion-modal-view class="transparent" ng-controller="openImageController" ng-click="openImageController.closeModal()"> <ion-content> <div class="modal image-modal transparent" ng-click="openImageController.closeModal()"> <ion-pane class="transparent"> <img data-ng-src="{{imageSrc}}" class="fullscreen-image"/> </ion-pane> </div> </ion-content> </ion-modal-view>
CSS:
.transparent { background: transparent !important; } .image-modal { width: 100% !important; height: 100%; top: 0 !important; left: 0 !important; }

9

I have an update on this if someone runs again and the height doesn’t work for him.

You need to use min-height instead of just height

Everything else works.

Though I’d let you know, might help someone, even though its an old topic.

1 Like
10

min-height not working in ionic2 modals.

11

Ionic 2.x + having ModalController options property cssClass. you can add your class using options and then can add css property to it.

like i did:

const myModalOptions: ModalOptions = {
      enableBackdropDismiss: false,
      cssClass : 'pricebreakup'
    };

    const myModalData = {
      name: 'Paul Halliday',
      occupation: 'Developer'
    };

    const myModal: Modal = this.modal.create('PriceBreakpopPage', { data: myModalData }, myModalOptions);

    myModal.present();

in app.scss

.pricebreakup .modal-wrapper{
    position: absolute;
    overflow: hidden;
    max-width: 320px;
    border-radius: 10px;
    width: 90vw;
    height: 50vh !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 0;
    box-shadow: 0 16px 20px rgba(0,0,0,.4);
    background-color: #fafafa;
  }
8 Likes
12

To resize the modal with particularly in Height or width try this scss in your app.scss
This will resize your modal into the original page size.

modal-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

@media not all and (min-height: 600px) and (min-width: 768px) {
  ion-modal ion-backdrop {
    visibility: hidden;
  }
}

@media only screen and (min-height: 0px) and (min-width: 0px) {
  .modal-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
1 Like
13

If i am resizing the modal backdrop is not working…

14

Works well! But I also need to add a min-height attribute, per @marko1943: