0

We are building an app with ionic library in angular. We are facing a problem: we want to display the bottom tab bar in the whole app including the modals but when the modal is opening (the designers wat to open it from the bottom), it goes over the tab bar. any suggestions or solutions of how can the tab bar is fixed there?

z-index doesn't work as the modal goes over everything.

Ruben Garcia
  • 1

1 Answers1

0

You can't. Modals purpose is to display above the rest of the app. No way around this. Several solutions you can do:

  1. place an instance of the tabs comp inside the modal. (not recommended)
  2. Give the modal a fixed height so the bottom tabs will show. but even then the user won't be able to click the tabs because the modals backdrop will be above.(not recommended)
  3. Revise your user flow, change the whole idea of having tabs inside of modals. What your suggesting is not very user or dev friendly. (recommended)
StackoverBlows
  • 473
  • 7
  • I did the second option, I gave a height of 90% and now I can see the bar, but as you explain, can't click on it. Thank you for your answer – Ruben Garcia Feb 14 '23 at 08:55
  • could be possible to create a function that, when you click outside of the modal, i'll close the modal? – Ruben Garcia Feb 14 '23 at 08:56
  • No function needed. There's a few modal props I believe you can use in combination. to the modal options add: showBackdrop: false and backdropDismiss: false. Use both of these as well as you added height of 90% and it should work. https://ionicframework.com/docs/api/modal#backdropdismiss https://ionicframework.com/docs/api/modal#showbackdrop – StackoverBlows Feb 14 '23 at 17:59
  • yes I did that yesterday, but when I click on the Tab bar, is not closing the modal, only when I click outside the modal on the page, the modal is closing. even though when I click the tab bar is working on the back of the modal. – Ruben Garcia Feb 15 '23 at 08:56