feat: customize where modal is appended to

rossholdway commented 3 years ago

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.

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

Additional Information

No response

stevebrowndotco commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

I would love to see this in v7! ✌🏼

DwieDima commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 11 months ago

This would be a nice improvement!

koczka commented 6 months ago

Looking forward to this.

hhornschuh commented 5 months ago

We need this feature!!

vmtzgr commented 4 months ago

When can we expect this feature?

RupertBarrow commented 1 month ago

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

That works well for me. Thanks.

ionic-team / ionic-framework