topic content-behind coexistence with search and zoom components. in Calcite Design System Questions

content-behind coexistence with search and zoom components.

LefterisKoumis — Tue, 24 Jun 2025 22:00:13 GMT

I'm using calcite-shell with the content-behind property to enable display-mode: float, which allows the end panel to have an adjustable height.

However, with the introduction of components in ArcGIS API for JavaScript 4.32, I noticed that enabling content-behind causes the <arcgis-zoom> component to disappear, and the <arcgis-search> component aligns directly against the action bar without spacing.

Below is a demo illustrating the visual difference in the <arcgis-search> and <arcgis-zoom> components when content-behind is enabled versus disabled.

https://codepen.io/lkoumis1/pen/yyywrvG?editors=1010

@KittyHurley

Re: content-behind coexistence with search and zoom components.

MattDriscoll — Wed, 25 Jun 2025 21:30:08 GMT

@LefterisKoumis Hello, you should be able to fix this using the `padding` property. https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/#padding

Here's an example: https://codepen.io/driskull/pen/KwpJMME?editors=1010

Re: content-behind coexistence with search and zoom components.

LefterisKoumis — Thu, 26 Jun 2025 23:31:17 GMT

Thank you @MattDriscoll . It works.

I just updated the references to the new newer version of ArcGIS JS API from 4.32 to 4.33 and it cannot display the map anymore with the error "

#spatialReference" "no spatial reference could be derived from the currently added map layers"

All I did was to change the JS version. Why the error? As you can see I still use AMD to declare my feature layer. Will AMD go away in the near future and use only ES modules?

https://codepen.io/lkoumis1/pen/yyywrvG?editors=1010

Thank you.

Re: content-behind coexistence with search and zoom components.

MattDriscoll — Fri, 27 Jun 2025 00:09:46 GMT

Hi @LefterisKoumis It looks like there are multiple scripts still pointing to 4.32 in the settings of that codepen. Under the HTML => stuff for head.

I think once that is cleaned up it should work.