Modal custom size page

Ionic Framework ionic-v3
1

I am trying to create several modal dialogs within my app, each needs to have a different size.

I have read different attempts at a solution, but nothing seems to work with the current version:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.8

The best I can currently do is change the size for ALL modals, by adding the following code to app.scss

.modal-wrapper{
position: absolute;
width: 90vw;
height: 50vh;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 0;
background: rgba(0,0,0,0.5);

}

@media (min-width: 300px) and (min-height: 500px) {
ion-modal ion-backdrop {
visibility: visible; }
}

I have added a page via ionic g page ProfilePopup which I’m calling like this:
let customModal = this.modalCtrl.create(ProfilePopup);
customModal.present();

Please help!!! I’m going crazy!!!

I somehow need to be able to make this modal popup in a small size without affecting other modals, in fact, I need a different size for each modal.

Thanks!

1 Like
2

Yeah, I couldn’t find a nice way to do it either - It seems to be possible to apply a class to the parent .modal-wrapper from within the modal component though, but it’s pretty hacky!

If you only show one at a time, It might be a better idea to just apply a class to the body when you open one? - I couldn’t do that as I wanted to be able to have a tiny modal above a larger one sometimes …

constructor(private ele: ElementRef) { }

…

ngAfterViewInit() {
    this.ele.nativeElement.parentElement.setAttribute("class",this.ele.nativeElement.parentElement.getAttribute("class")+ " some-class")
}
3

Hello I want to use the same style to add style in several modals, but where is the import of ElementRef ? is it the parent page wich call the presentation of the modal.
e.g if I call modal from CallerPage class, would I have to declare that

 import { CallerPage } from '../myPath/CallerPage;
 constructor(private ele:CallerPage)`

Please ?

4

Hi,

ElementRef is one of Angular’s classes - You can import it from the angular core package :

import { ElementRef } from "@angular/core";

ElementRef just represents a native dom element - When you let Angular’s DI inject one in the constructor as above, the value given is the element of the current component.

When you create a modal in Ionic, It’ll place your component within an instance of the Ionic modal component, which is why you can see the code sample above accessing the actual modal through the parentElement property…

As I say, this code is very hacky though - Changes internal to Ionic could break it, and there’s some implications to using ElementRef in your code : https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html …

5

samfozz’s answer works perfectly fine. Wonder why there isn’t a option for this when creating the modal though.