Issue
How can I show the modal behind the tabs? Currently the modal overlaps everything even though the z-index is set to 2 and the z-index of the tabs is set to 5.
I have been trying to use z-index, however it doesn't work on the modal. Here's the code:
Modal creation
const modal = await this.modalController.create({
showBackdrop: false,
backdropDismiss: true,
component: CreateExpenseComponent,
cssClass: "createExpenseModal",
});
return await modal.present();
Modal CSS (global.scss)
.createExpenseModal {
position: absolute;
z-index: 2 !important;
//--backdrop-opacity: 0 !important;
.modal-wrapper.sc-ion-modal-ios,
.modal-shadow.sc-ion-modal-ios {
z-index: 2;
position: absolute;
top: 35rem;
}
}
Ion tabs css
ion-tabs {
z-index: 5;
position: relative;
}
Thank you for your time!
Solution
I don't think what you are trying to achive with z-index
is possible since the ion-modal
element is appended outside of the current page. But there's a way you could work your way through it.
You can divide your background effect in 2 parts:
- The first part is were your floating button is, i assume you have it along side the
ion-tab-button
in the tab bar. You can add abackground-color
with colors that matches the one on the modal, and create a type of teardown effect with pure css or the exact shape you are looking for. There's a ton of examples out there, you can learn more about it here. - The second part is to position your modal right on top of the tab bar using
bottom
css property.
Answered By - Ivan Cepeda
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.