nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Can't customize LayerList styles in JavaScript Maps SDK 4.29

AnastasiiaDzundza

With JavaScript Maps SDK 4.28 we customized a bit styling LayerList on our website to be consistent with our project's design. For example visibility icon was changed to checkbox. But since 4.29 our style overwriting doesn't apply anymore.

Reaching layerList elements isn't accessible any more since calcite elements are used to shape the widget and we can't reach with simple styling the elements inside it.

Does anyone know some approaches how to do it?

タグ付けされた投稿をもっと見る

Accepted answers

Sage_Wall

Hi @AnastasiiaDzundza ,

Thanks for reaching out. Since we refactored the layer list to use calcite components you will need to follow the colors and theming guide found there. To add your checkboxes back we added a new property at 4.29 called visibilityApearance that will allow you to switch between the visibility icons and a checkbox. Hope this helps.

All comments

AnastasiiaDzundza

But is there any way to re define expand/collapse button in actions list? Under listItemCreatedFunction?

Sage_Wall

There isn't any properties to control the placement of the expand/collapse button and the actions menu outside of the left-to-right and right-to-left settings (https://developers.arcgis.com/javascript/latest/localization/#support-for-right-to-left-rtl). Custom actions can be easily added using the listItemCreatedFunction and then adding items to the actionsSections . There is a sample located here: https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist-actions/

🙂

AnastasiiaDzundza

Thank @Sage_Wall you a lot for the answer, any chance you can tell me if the is any java script api that alows to change the order of expand/collapse button and custom added actions?

Sage_Wall

Hi @AnastasiiaDzundza ,

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.