Select to view content in your preferred language

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

196
1
Jump to solution
07-31-2024 03:59 PM
DrewNemecekIp
Emerging Contributor

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.

DrewNemecekIp_0-1722466581244.png

Now it looks like this at 4.29.

DrewNemecekIp_1-1722466641756.png

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.

0 Kudos
1 Solution

Accepted Solutions
Sage_Wall
Esri Contributor

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

View solution in original post

0 Kudos
1 Reply
Sage_Wall
Esri Contributor

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

0 Kudos