search

tech-systems / panes

🎉📱 Create dynamic modals, cards, panes for your applications in few steps. One instance – Thousands solutions. Any framework and free.
https://panejs.com
MIT License
681 stars 40 forks source link

[BUG] z-Index issue or request to set it manually. #222

Closed woutersteven closed 12 months ago

woutersteven commented 12 months ago

Describe the bug Using Ionic 7+ and Angular 16+

component appears in front of pane. Manually changing the z-index in Chrome Dev Tools hides the Fab button behind the pane, which is the desired beahvior. I have two panes on 1 page, one for when somebody clicks on an ion-item...(to edit it), this is working well.. and one at the bottom of the page, which acts as a FAB button.. The class for that one is: ```
``` How can i manually change the z-index of the wrapper? or is there a property that i missed that will prevent the ion-fab from showing on top of the pane? These are my current settings for the relevant pane. ``` private cupertinoPaneSettings: CupertinoSettings = { modal: false, backdrop: true, fitHeight: false, bottomClose: true, breaks: { middle: { enabled: true, height: 200, bounce: true }, bottom: { enabled: true, height: 80 } } }; ``` The pane itself is working, its just not in front of the component.
roman-rr commented 12 months ago

@woutersteven2020 Just quick recommendation before checking the issue description is to check parentElement settings. Try set the option parentElement to 'body' or ion-content. I will check soon description.

woutersteven commented 12 months ago

Either "body" or "ion-content" didn't have the desired effect. With ion-content it did not even show up. Perhaps because it was in the tabs section of the app, which is another component.

When I do it manually and add

<div class="cupertino-append" style="z-index: 1000 !important;"></div>

To the template, and then set parentElement to ".cupertino-append", then it works with the manual z-index. Just for others in case they run into it.