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 Layer List Widget Be Open By Default

pmckinney

I'm developing a WAB app using Developer edition 2.4. I had a couple questions about the Layer List widget:

1. Is it possible to have the widget open when the map first loads?

2. Is it possible to have a map service containing sub-layers to be expanded by default? I have an image of what I would prefer.

list layer widget expanded by default screen shot

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Patrick,

Sure, to have the widget open at start then you just have to enable the open at start in the widgets settings:

The widget added from the widgets collection can be set to open automatically when apps start. To do so, click the dot on the widget to change it to dark green. A maximum of two widgets can open automatically: one is on the controller and another in the placeholder.

Widget with open at start

For having the layers expanded by default see this thread:

https://community.esri.com/thread/189567-show-legend-in-layer-list-widget-by-default#comment-663376

All comments

RobertScheitlin__GISP

Have you seen this thread?

https://community.esri.com/thread/201369-wab-how-do-i-edit-the-group-widget-layout

Anonymous User

Robert,

Once the widgets are grouped can one widget be defaulted to expand and the rest be closed? I have multiple layer list widgets in one grouping, I would like the first one to display when the group is opened and the others to be closed. Below is what it looks now.

pmckinney

I've added a Gist on GitHub with the CSS rules for achieving this. I always create a style.css file for each WAB project, where I store the default rules in the style tag, along with my custom styles.

There are two rules to achieve the result. A sample map can be found at 911 CAD Map .

se2539

Also interested in what you did to the CSS to keep the layer list expanded; not exactly sure which file gets manipulated.

AndrewBartell

Patrick,

Do you have any links you could share for how to implement that CSS script? I would love for my layers list to open as expanded, but I'm not sure how to implement the CSS script. Do you have any additional resources you could share in this tread on this procedure?

Thank you!

RobertScheitlin__GISP

Patrick,

Hmm. never seen it done with css. Don't forget to mark this question as answered.

pmckinney

Thanks! Not sure how I missed that. I ended up using a CSS trick to have the list expanded:

<SPAN class="comment token">/* Layer list expanded by default */</SPAN>
<SPAN class="selector token">.jimu-widget-layerList table.layer-sub-node</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> table<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="comment token">/* layer list legend hidden so it loads properly */</SPAN>
<SPAN class="selector token">.jimu-widget-layerList table.layer-sub-node .legends-loading-img</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

RobertScheitlin__GISP

Patrick,

Sure, to have the widget open at start then you just have to enable the open at start in the widgets settings:

Widget with open at start

For having the layers expanded by default see this thread:

https://community.esri.com/thread/189567-show-legend-in-layer-list-widget-by-default#comment-663376

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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