I have a modal for adding a new payment to an invoice. I want to utilize it from two places in my app. The first, which is working, is to call it from a table custom column button. This adds a payment to the invoice in the row the button was click on. I also have an Edit custom column button that opens a model to be able to edit invoice details. I have a button there that I want to open the same Add Payment modal. However, the Add Payment modal window shows up under the Edit Invoice modal.
So, how do I get the modal to show up on top of the another modal when the first modal's button is below the other modal?
Edit: I tried putting the Add Payment modal on the Edit Invoice modal, but that does not work, the Add Payment modal is created but it is only visible once you open the Edit Invoice modal.
My two workarounds are duplicating the modal or making a module, both of which add more future support baggage.
I've run into similar issues, and eventually had to go with splitting the modal out into a module approach. You might be able to hack the z-index values for the modals separately with some global JS code, but not sure there is much benefit to doing that over a separate module...
One thing that I use to solve this is just moving the modals around in the grid layout, a little moving around here and there somehow results in the desired effect. This isn't that helpful as there is no logic behind it (or maybe there is some logic that Retool uses but I don't know how Retool decides). What would help is Retool either explaining the stacking logic they use or allowing for setting the z-index of a modal.
Could you use one modal with a tabbed container in it and set the tab based on which button was clicked?
That just might work! But that sparked another idea using a new feature of the container component: Use multiple views, which is really the same as the tabs component, just without the tabs.
1 Like