Bug: calcite-fab - issue with z-index

[AdelheidF]

Summary

z-indexed content inside components can conflict with things like the sticky fab.
Find a generic solution as we'll probably see other widgets that utilize z-index, e.g. a slider with multiple handles.

Actual Behavior

Expected Behavior

No such conflicts.

Reproduction Steps

1. add a z-indexed thing to a panel
2. add a calcite-fab in the panel's fab slot.
3. panel should have enough content above the z-indexed thing to make the panel scroll and to place the z-indexed thing under the fab when it's acting sticky.
4. make it so the z-indexed thing is under the fab slot

Relevant Info

[asangma]

@jcfranco @driskull @kat10140 Would y'all agree that setting the z-index to 5 is a good approach?

[driskull]

Can we try setting position:relative on the container for the slot and a zindex if needed? We don't want to have to compete with whatever they put in the slot. We should just have the fab always be above it.

[AdelheidF]

The container of the fab is a flow-item. If I set position:relative and z-index doesn't change anything.

http://devext.arcgis.com/apps/mapviewer/index.html?url=https://services1.arcgis.com/4yjifSiIG17X0gW4/arcgis/rest/services/FatalAccidents2017/FeatureServer/0
Click on Filter and add 2-3 expressions.

[driskull]

@AdelheidF I'm talking about setting the position of the fab container within the component. We should try setting position relative on that and handling any zIndex issues so we don't have to worry about user zIndexes.

[asangma]

@driskull Hmm...we're using position: sticky for the container of the fab slot.

[driskull]

yeah, just make sure that the container it's inside has a position relative

[driskull]

We handled this same scenario in the scrim component

[asangma]

Got it.

[asangma]

Applying position: relative to various things is maybe not working. For now though, Jonathan will be removing z-index from the slider handle for when there's only one handle. This will take care of the specific problem, but we may see other z-index issues in the future.

@AdelheidF I'm going to edit the issue to be general to any z-indexed thing. Cool?

[driskull]

@asangma adding this to the container around the slot should fix it.

https://github.com/Esri/calcite-components/blob/master/src/components/calcite-scrim/calcite-scrim.scss#L38-L39

[driskull]

In that case it would be the section here. https://github.com/Esri/calcite-app-components/blob/master/src/components/calcite-panel/calcite-panel.tsx#L226

[asangma]

I'll give it a try @driskull .

[AdelheidF]

Try putting position: relative and z-index: 0 on #feature-filter-expressions.

That fixed it for my case.

[asangma]

Thanks @AdelheidF!

[jcfranco]

Per the above conversation, closing as verified.