feat: customize where modal is appended to

[rossholdway]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Specifying the parent component for a modal.

Similar requests: https://github.com/ionic-team/ionic-framework/issues/22689 https://github.com/ionic-team/ionic-framework/issues/23250

Describe the Use Case

I'm attempting to use the new sheet modal within a map UI. The problem is, the map is not the only feature of my app - it's a "tab" within my app.

If I launch a sheet modal within the map tab, it covers my tab bar. It'd be nice to be able to tie the sheet model to that specific tab, so that users can still navigate tabs while having a location / sheet modal active on the map tab.

Describe Preferred Solution

Perhaps there could be a ModalOption to allow for specifying the parent component, which by default would be ion-app?

Describe Alternatives

I'm not aware of any other way to do this within the current framework version 6.RC.2

Related Code

https://github.com/ionic-team/ionic-framework/blob/61be8aa140c38338b94b2234d732bab67e431093/core/src/utils/overlays.ts#L59-L60

Additional Information

No response

[stevebrowndotco]

For now I just add a custom class:

 this.sheetModal = await this.modalController.create({
      component: SheetModal,
      cssClass: "sheet-custom-class",
      backdropDismiss: false,
      backdropBreakpoint: 0.8,
      breakpoints: [0.065, 0.45, 0.8, 1],
      initialBreakpoint: 0.45,
    });

.sheet-custom-class {
  margin-bottom: 57px;
}

[rossholdway]

@stevebrowndotco Thanks for the comment. Adding the margin allows access to the tab bar, however you can't then swap between tabs (so that the modal only displays within a specific tab)

[EinfachHans]

btw. this would be cool for other overlays as well. In the github app for example you can see toasts that are added to a page instead of globally😊

[DwieDima]

is there any workaround right now to attach ion-modal to specific element?

update

this should work for ion-modal:

  public async showModalInsideIonContent(): Promise<void> {
    const modal = await this.modalController.create({
      component: SomePage,
    });

    const content = document.querySelector('#ionContent');
    content.appendChild(modal);

    await modal.present();
  }

<ion-header>
  <ion-toolbar>
     <ion-title>modal inside content</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [forceOverscroll]="false" id="ionContent">
     <!-- modal will render here -->
</ion-content>

[TomDeSmet]

This functionality is absolutely needed. A real-life example is the official Find My app.

The solution @DwieDima proposes has its own drawbacks and I haven't gotten it completely working yet. The behaviour of the other components alters quite a bit.

[EinfachHans]

I would love to see this in v7! ✌🏼

[DwieDima]

This functionality is absolutely needed. A real-life example is the official Find My app.

The solution @DwieDima proposes has its own drawbacks and I haven't gotten it completely working yet. The behaviour of the other components alters quite a bit.

these drawbacks should be fixed if you render ion-modal inside a div

  public async showModalInsideIonContent(): Promise<void> {
    const modal = await this.modalController.create({
      component: SomePage,
    });

    const content = document.querySelector('#ionContent');
    content.appendChild(modal);

    await modal.present();
  }

<ion-header>
  <ion-toolbar>
     <ion-title>modal inside content</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [forceOverscroll]="false">
     <div  id="ionContent">
          <!-- modal will render here -->
     </div>
</ion-content>

[djabif]

Hey, I'm trying to build a UI similar to this one where the sheet modal lives behind the tabs and when it's opened it kind of "merges" with the top bar. Lately I've been seeing this UI in many apps and I want to be able to build it with Ionic. Any plans on supporting this or, any ideas how can I achieve this with the current modal component?

https://github.com/ionic-team/ionic-framework/assets/1735814/350848e3-2b31-4887-89df-82a0c2b08d51

[DwieDima]

Hey, I'm trying to build a UI similar to this one where the sheet modal lives behind the tabs and when it's opened it kind of "merges" with the top bar. Lately I've been seeing this UI in many apps and I want to be able to build it with Ionic. Any plans on supporting this or, any ideas how can I achieve this with the current modal component?

RPReplay_Final1689264006.MP4

i tried around a bit and came up with this solution where i used the event listener ionBreakPointDidChange to set the css styling. Of course it would be nicer if you can subscribe to the scrollchanges. It can be improved with css animations of course. You also have to calculate the correct max breakpoint for your modal.

https://stackblitz.com/edit/angular-hvyt7f-ehgg5w?file=src%2Fapp%2Fhome%2Fhome-page.component.ts

https://github.com/ionic-team/ionic-framework/assets/26873275/21d67c8a-3a97-4f73-9755-98348b45975a

[djabif]

Hey, I'm trying to build a UI similar to this one where the sheet modal lives behind the tabs and when it's opened it kind of "merges" with the top bar. Lately I've been seeing this UI in many apps and I want to be able to build it with Ionic. Any plans on supporting this or, any ideas how can I achieve this with the current modal component? RPReplay_Final1689264006.MP4

i tried around a bit and came up with this solution where i used the event listener ionBreakPointDidChange to set the css styling. Of course it would be nicer if you can subscribe to the scrollchanges. It can be improved with css animations of course. You also have to calculate the correct max breakpoint for your modal.

https://stackblitz.com/edit/angular-hvyt7f-ehgg5w?file=src%2Fapp%2Fhome%2Fhome-page.component.ts

Bildschirmaufnahme.2023-07-13.um.22.46.37.mov

Thanks for sharing your workaround.

[ngmiduc]

This would be a nice improvement!

[koczka]

Looking forward to this.