New to Components. How To Manually Set Expand Component Position and Color

RichardRhone1 · ‎03-20-2025

I am tryin simple expands with legend , layer components as my first attempt at components

I am unable to position the expand component when i set the position to manual. Also , I am unaware of how to set the expand color:

<html>

<script type="module" src="https://js.arcgis.com/calcite-components/3.0.3/calcite.esm.js"></script>

<link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.32/"></script>

<script type="module" src="https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js"></script>

<body>

<arcgis-expand close-on-esc position="manual" expand-icon="layers" expand-tooltip="Layers" id="exLayers">
<arcgis-placement>
<arcgis-layer-list></arcgis-layer-list>
</arcgis-placement>
</arcgis-expand>

<arcgis-expand close-on-esc position="manual" expand-icon="basemap" expand-tooltip="Available Basemaps" id="exBase">
<arcgis-placement>
<arcgis-basemap-gallery></arcgis-basemap-gallery>
</arcgis-placement>
</arcgis-expand>

</arcgis-map>

</div>

</body>

</html>

------------------------------------------------ THESE STYLES DONT WORK - -------------------------------------------

#exLegend{ position:absolute; top:55px; right:15px }
#exLayers{ position:absolute; top:55px; right:15px }

esri-expand {position: absolute;top: 20px;right: 20px;z-index: 10;}

Anonymous User · ‎03-21-2025

As @ReneRubalcava said, the "proper" way to manually position Expand components doesn't exist yet. But there is a workaround.

After the guts of Expand are moved to view.ui, your arcgis-expand component can still reach it through (an undocumented) .childElem property.

// Get a reference to Expand component by given id
const legendExpand = document.querySelector("#exLegend");
      
// Listen for when map view is ready
const arcgisMap = document.querySelector("arcgis-map");
arcgisMap.addEventListener("arcgisViewReadyChange", (event) => {  
    // .childElem property links to the element in view.ui
    // Add some custom class to style and move the button
    legendExpand.childElem.classList.add("legend-expander");
})

Here is a Codepen with a couple of Expands in different locations: https://codepen.io/edvinasHB/pen/dPyezPe

Styling

Third party Web Components can be styled mainly in three ways:

1. Slots. They allow you to insert your styled elements inside a component. It's similar to a picture frame. You can put anything you want in it, but you can't change the frame itself. Expand component doesn't have any (additional) slots, so you can't use that. Calcite components typically have slots and they are documented.

2. Global CSS variables. If component uses global variables, you can set them in your global CSS and the component will see them. Both Esri and Calcite components use global variables, so this is a good approach. I used them in the codepen sample, .layers-expander rule. Calcite documentation lists all the possible variables for it's components. More on this: Styling | Overview | ArcGIS Maps SDK for JavaScript 4.32 | Esri Developer

3. Get to shadowRoot with JS. If component uses "open" mode, you can get into the insides of the component through .shadowRoot property and apply inline styles directly. Calcite components are open, so you can use this approach when you are out of other options. In the Codepen example I changed the width of a button that was inside shadow DOM and didn't use a css variable. Very good read to understand shadow DOM in general: Styling a Web Component | CSS-Tricks

View solution in original post

ReneRubalcava · ‎03-20-2025

I don't think you'll be able to target individual expands like that... yet. Right now the arcgis-expand creates an element with the class ".esri-expand" and places that element in the view.ui. So the actual arcgis-expand element you created is not in the view.ui. I don't think there is an easy way with css to target multiples of these same type of elements.

In a future release we will be using slots to position these elements which will make it easier.

RichardRhone1 · ‎03-20-2025

Interesting.....

Is there a way to set backgroundColor, iconColor and hoverColor to the expand?

Anonymous User · ‎03-21-2025