ArcGIS Maps SDK for JavaScript 4.29 LayerList Widget ListItem Font Size Editing

DrewNemecekIp — Wed, 31 Jul 2024 22:59:53 GMT

We are upgrading our JavaScript Maps SDK application, and I have noticed that the layer list widget has a much smaller font.

The widget looked like this at 4.21.

Now it looks like this at 4.29.

How can I increase the font size of the list items this widget?

I have attempted some CSS styling, but it is not working. My guess is because this styling is happening within ESRI's JavaScript code.

Re: ArcGIS Maps SDK for JavaScript 4.29 LayerList Widget ListItem Font Size Editing

Sage_Wall — Wed, 31 Jul 2024 23:30:36 GMT

Hi @DrewNemecekIp ,

We refactored the LayerList to use calcite components in between 4.21 and 4.29. When styling calcite components you need to use css variables. More info can be found here for calcite typography: https://developers.arcgis.com/calcite-design-system/foundations/typography/

calcite-list, calcite-button { --calcite-font-size--1: 24px; --calcite-color-text-1: #3c83b7; --calcite-color-text-2: #3c83b7; --calcite-color-text-3: #3c83b7; }

I modified the layer list sample to change the font size in the code pen https://codepen.io/sagewall/pen/yLdMVNo

topic Re: ArcGIS Maps SDK for JavaScript 4.29 LayerList Widget ListItem Font Size Editing in ArcGIS JavaScript Maps SDK Questions

ArcGIS Maps SDK for JavaScript 4.29 LayerList Widget ListItem Font Size Editing

Re: ArcGIS Maps SDK for JavaScript 4.29 LayerList Widget ListItem Font Size Editing