topic Re: LayerList in a container displaying weird in ArcGIS JavaScript Maps SDK Questions

LayerList in a container displaying weird

brzt — Tue, 09 Dec 2025 03:04:40 GMT

Hi,

I'm making a webmap and am running into an issue. I'm using a LayerList to produce a legend for my maps and have it inside of a container. The title for the things in the legend are written vertically

and is then stacking horizontally next to each other. I want to get these to instead stack vertically down? I've never had this problem before but have also never used a container with LayerList before. Snippets of relevant code are included below:

...

#titleLegend{
float: left;
height: 31px;
width: 15%;
height: 31px;
background color: black;
color: white;
font-weight:400;
font-size:25px
}

...

Re: LayerList in a container displaying weird

Sage_Wall — Tue, 09 Dec 2025 15:56:53 GMT

Hi @brzt ,

My guess is it's something to do with the width: 15% css. Is the container wide enough to show the title horizontally. I copied you snippet into a codepen and if I remove the width: 15%; the layer titles have more room to display horizontally. Hard to say whats going on for sure without seeing a complete layout or repro app, but I am guessing the layer list doesn't have enough horizontal space and the titles are wrapping around to new lines.
https://codepen.io/sagewall/pen/KwzbONW?editors=1000

Re: LayerList in a container displaying weird

brzt — Wed, 10 Dec 2025 00:11:25 GMT

I think the issue I'm running into is that I am calling multiple maps legend into the same legendDiv and they're stacking horizontally. Is there a way to make them stack under each other instead?

Re: LayerList in a container displaying weird

brzt — Wed, 10 Dec 2025 00:19:47 GMT

Ended up adding sub Divs to get everything to work!