Bring Calcite Components to Front/Top

DrewNemecekIp — Tue, 09 Jul 2024 19:41:00 GMT

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?

Re: Bring Calcite Components to Front/Top

MattDriscoll — Tue, 09 Jul 2024 20:37:48 GMT

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

Re: Bring Calcite Components to Front/Top

DrewNemecekIp — Fri, 12 Jul 2024 17:21:55 GMT

@MattDriscoll, thank you for pointing me in the right direction. I had to redesign my modals, but this worked!

topic Re: Bring Calcite Components to Front/Top in Calcite Design System Questions

Bring Calcite Components to Front/Top

Re: Bring Calcite Components to Front/Top

Re: Bring Calcite Components to Front/Top