Select to view content in your preferred language

LayerList in a container displaying weird

117
3
Monday
brzt
by
New Contributor

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

l

i

k

e

t

h

i

s

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
}

...

const legend = new LayerList({
container:"legendDiv",
view: view,
listItemCreatedFunction: function(event){
const item = event.item;
if (item.layer.type !=="group") {
item.panel = {
content: "legend",
open: true
};
}
}
});

0 Kudos
3 Replies
Sage_Wall
Esri Regular Contributor

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

0 Kudos
brzt
by
New Contributor

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?

0 Kudos
brzt
by
New Contributor

Ended up adding sub Divs to get everything to work!