ionic framework - framework - Ionic 2 Cómo cambiar la altura y el ancho modal

ionic panel

Question

Tengo una página en mi aplicación que tiene una página modal y quiero cambiar el tamaño de esa página, trato de usar la propiedad del modelo para cambiarla, pero cambiará el tamaño de todas las demás y quiero tener diferentes modelos con diferentes tamaños

$modal-inset-min-width

Answer 1

Si ves dentro el método create de ModalController , es:

create(component: any, data?: any, opts?: ModalOptions): Modal;

Y aquí está ModalOptions :

export interface ModalOptions {
    showBackdrop?: boolean;
    enableBackdropDismiss?: boolean;
    enterAnimation?: string;
    leaveAnimation?: string;
    cssClass?: string;
}

Entonces, solo agrega una clase a tu modal así:

let modal = this.mModalController.create("YourModalPage","Your data",{
    cssClass: "my-modal"
})

Y ahora puedes .my-modal para tu modal por clase .my-modal

Answer 2

Agregue esto en su app.scss :

.my-modal {
    height: 50%!important;
    width: 50%!important;
} 

Answer 3

Usé el enfoque sugerido para lanzar un modal con una altura del 50%, pero encontré el problema de no haber habilitado el fondo.

//app.scss

.my-modal {
  height: 50%!important;
  transform: translateY(100%);
}

productos:

así que terminé con:

//app.scss

@include media-breakpoint-down(sm) {
.my-modal {
    ion-backdrop {
      visibility: visible !important;
    }
    .modal-wrapper {
      border-radius: 10px 10px 0px 0px;
      overflow: hidden;
      top: 50%;
      left: 0;
      position: absolute;
      width: 100%;
      height: 50%;
    }
  }
}

que producen estas vistas:

Usé el punto de corte mixin para mantener el comportamiento modal en 768+ px (tabletas, etc.).

La esperanza ayuda a alguien.