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
};
}
}
});
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
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?