feat: ios card style modal for iPad should not affect routerOutlet

Feature Request

Ionic version:

[x] 5.0.4

Describe the Feature Request

At the moment the card-style-modal only looks good on mobile view. On tablet view and especially with split-pane there is a lot of potential for improvement. There should be an option to open a modal as usual. Subsequent nested modals should not have any influence on the routerOutlet, but only on the underlying modal

Current behaviour:

Link to video

Describe Preferred Solution

calling a child modal by using

presentingElement: await this.modalController.getTop()

should appear as in the picture by providing additional property like

  public async onOpenModal() {
    const modal = await this.modalController.create({
      component: TestPage,
      swipeToClose: true,
      presentingElement: await this.modalController.getTop(),
      style: 'tablet'
    });
    return await modal.present();
  }

furthermore nested modals should respect the given width/height provided by cssClass.

Additional Context

You can find this kind of card style modal in the IOS Appstore

[DwieDima]

@liamdebeasi so much wow!

I’ve tested your dev build using iPhone and iPad view on chrome browser. Now --width and --height are applied to modals. Backdrop dismiss also works. here are some working samples using 600px for --width and --height:

• iPad
• iPhone

also i discovered a bug, where card style modal gets incorrectly applied on iPad using

--width: 100%;
--height: 100%;

heres the sample:

• iPad

thank you very much for your high commitment!

Update

pushing modals on android tablet view leads to overlapping backdrop background color. Sample:

• Android tablet view

Update 2

I’ve deployed it on my device. Seems like the modal wont show the stacked card view, instead taking full height. Modal is using 600px for width and height for cssClass (also without cssClass attribute, it makes no difference). Sample:

• iPhone 11 Pro, IOS 13.3.1

[liamdebeasi]

Thanks for the follow up.

also i discovered a bug, where card style modal gets incorrectly applied on iPad using

–width: 100%; –height: 100%;

This is the correct behavior. 100% is going to make the dimensions of the modal be 100% of the parent container. In this case, that parent element is ion-app. If you want some offsets built in, you will need to add them yourself when specifying --width and --height.

pushing modals on android tablet view leads to overlapping backdrop background color.

If you feel this is a bug please open a separate issue as this does not appear to be related to the card modal updates.

I’ve deployed it on my device. Seems like the modal wont show the stacked card view, instead taking full height.

Fixed! Here’s a dev build 5.1.0-dev.202003171608.9d9a02f.

This PR looks to be in pretty good shape, so I will get this reviewed and merged in as soon as I can. Thanks for all the testing and feedback!