Open geospatialem opened 1 year ago
This seems to be a FF bug. It seems like they don't handle a fixed element inside an element positioned as sticky
. The fab
slot is positioned sticky
to stay in the same place when scrolled. Seems like they won't fix it.
https://bugzilla.mozilla.org/show_bug.cgi?id=1514291 https://bugzilla.mozilla.org/show_bug.cgi?id=1452006
Unrelated question, is it valid for slotting a calcite-split-button
inside a panel with the fab
slot? Seems like our fab
slot says...
* @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
So isn't this not even a valid thing to do? Either that or our doc needs to be more specific on what is allowed.
If we are going to allow other things slotted in the fab
slot, maybe we can rename the slot and update the doc?
Maybe the slot could be named to reflect that whatever slotted will positioned stuck at the bottom.
Unrelated question, is it valid for slotting a
calcite-split-button
inside a panel with thefab
slot? Seems like ourfab
slot says...
@slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
Was wondering this as well, but the use case seemed to be a bit different than the footer-actions
slot, so maybe speaks to your next comment on the slot rename.
If we are going to allow other things slotted in the
fab
slot, maybe we can rename the slot and update the doc?
This could be a good path forward, since the slot has different benefits/uses than the footer-actions
slot.
I'll defer to @jcfranco but as it stands the doc really says that only a fab is allowed in that slot so this issue is "technically" invalid :)
There is a workaround using the footer
slot, which mitigates the issue:
<calcite-split-button overlay-positioning="fixed" primary-text="Add" appearance="outline" primary-icon-start="layers" slot="footer">
Reached out to the Map Viewer team to determine if the workaround fits the need, or determine the use case for the fab
slot prior to closing or issue prioritization post 1.0.
Will review once PR #6520 has been incorporated to review the above issue.
Still occurring in Firefox in 1.3.1
- Codepen has been updated.
From the MV team:
Not high priority since its occurring in Firefox, but definitely something they would like fixing. Moving to the upcoming R03 release.
Via Chris and @rebollin:
This would seem a common pattern for how apps would put together these components (layer list + browse / some action)...maybe forgetting something but it would seem odd to drive that from the footer (even though MV already in spots like the basemap gallery.
Hi @geospatialem! What is the likelihood of getting this fix in for R03?
@geospatialem @jcfranco Maybe we could have a different slot that doesn't position sticky but just always places at the bottom absolutely?
I'm not sure adding an absolutely-positioned slot is the way to go since its contents would scroll.
As Matt said, this is a Firefox bug (found a couple more), which limits our options. There are some additional workarounds for this:
overlay-positioning=absolute
(default) will prevent clipping by positioning within the panel, but it might not be ideal depending on the width of the dropdown-groups/items and panel.WRT the fab
slot doc, we could leave as is or revisit it to be a bit more generic. We have some slots that are designed with a specific component in mind, so YMMV when deviating.
FWIW, I also submitted a Webkit bug based on one of the FF issues.
Actual Behavior
When slotting
dropdown-item
s into asplit-button
'sfab
slot some browsers (Firefox and Safari) are placing the component underneath parent components, even if usingoverlay-positioning="fixed"
.Expected Behavior
The
fab
slot should perform similar to the experience in Chrome/Edge and to thefooter-actions
slot where any slotted child components are depicted with the highest z-index.Reproduction Sample
https://codepen.io/geospatialem/pen/xxzrJpO
Reproduction Steps
dropdown-item
s placement underneath thecalcite-flow-item
Reproduction Version
beta.98
Relevant Info
Browsers effected:
Regression?
No response
Impact
The Map Viewer team needs to use the
fab
slot to maintain design functionality, in particular with the "Layers" panel, so users have the ability to add layers to the map.fab
slotfooter
slotEsri team
ArcGIS Map Viewer