From 443cbd9eb273767d8405b6a05ffabee037e9f3b7 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 21 Jan 2020 15:31:44 -0500 Subject: [PATCH] fix(modal): card-style modal now opens at full width on larger devices (#20256) fixes #20255 --- core/src/components/modal/modal.ios.scss | 1 + core/src/components/modal/readme.md | 2 ++ core/src/components/modal/usage/angular.md | 2 ++ 3 files changed, 5 insertions(+) diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss index 590892088d..5639d72f98 100644 --- a/core/src/components/modal/modal.ios.scss +++ b/core/src/components/modal/modal.ios.scss @@ -21,6 +21,7 @@ :host(.modal-card) { --backdrop-opacity: 0.15; + --width: 100%; align-items: flex-end; } diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 36e9d6a619..b1169ee2cb 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -157,6 +157,8 @@ export class CalendarComponentModule {} Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped. +If you are creating an application that uses `ion-tabs`, it is recommended that you get the parent `ion-router-outlet` using `this.routerOutlet.parentOutlet.nativeEl`, otherwise the tabbar will not scale down when the modal opens. + ```javascript import { IonRouterOutlet } from '@ionic/angular'; diff --git a/core/src/components/modal/usage/angular.md b/core/src/components/modal/usage/angular.md index d8b16df1e0..68425978a6 100644 --- a/core/src/components/modal/usage/angular.md +++ b/core/src/components/modal/usage/angular.md @@ -135,6 +135,8 @@ export class CalendarComponentModule {} Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped. +If you are creating an application that uses `ion-tabs`, it is recommended that you get the parent `ion-router-outlet` using `this.routerOutlet.parentOutlet.nativeEl`, otherwise the tabbar will not scale down when the modal opens. + ```javascript import { IonRouterOutlet } from '@ionic/angular';