Hello. I am designing a UI with the Calcite Design System (2.6) and the JavaScript Maps SDK (4.29).
I am using modals as data entry forms in the shell's modals slot. I am using alerts in the alerts slot, and I also have a loader in the body outside of the shell. Below is the basic pattern with all irrelevant code removed.
<calcite-loader
label="Loading...">
</calcite-loader>
<calcite-shell content-behind hidden>
<calcite-alert
slot="alerts">
</calcite-alert>
<calcite-modal
slot="modals">
</calcite-modal>
</calcite-shell>
The issue I am facing is that I cannot get the the alert to appear in front of the modal when the modal is in the modals slot. When the modal is not in the modals slot, the alert appears in front of the modal.
Further, regardless of where I put the modal and the loader, I cannot get the loader to pop up in front of any components.
I have tried using z-index in the following manner:
calcite-loader {
position: relative;
z-index: 100;
}
However, that does not work either. Is there a suggested pattern for accomplishing this, or is there some property I am missing?
Solved! Go to Solution.
Hi @DrewNemecekIp, I think we have an issue to address what you are seeing. Does this sound correct? https://github.com/Esri/calcite-design-system/issues/6818
There is also a workaround noted here: https://codepen.io/mac_and_cheese/pen/WNBNEWB?editors=1000
Hi @DrewNemecekIp, I think we have an issue to address what you are seeing. Does this sound correct? https://github.com/Esri/calcite-design-system/issues/6818
There is also a workaround noted here: https://codepen.io/mac_and_cheese/pen/WNBNEWB?editors=1000
@MattDriscoll, thank you for pointing me in the right direction. I had to redesign my modals, but this worked!