topic Re: Widen Expand Widget button and display text instead of icon in ArcGIS JavaScript Maps SDK Questions

Widen Expand Widget button and display text instead of icon

DavidMarley — Mon, 02 Mar 2020 23:30:52 GMT

We have a client request to display the word "Legend" in a button on the map, that will expand/open a legend panel (in this case a custom div we have created, not the Legend widget). So basically want to make one Expand button wider, and include text instead of the typical icon. Is there a pattern for doing this? And/or examples? I know we can just forgo the Expand widget and create our own button to place over the map - and we may end up doing that - but first want to see if there's a reasonable way to do this with the Expand widget.

In theory we should be able to use the ExpandViewModel to make the Expand button look however we want, right? It's hard to follow where to start with that though, based on the existing doc and samples.

Thanks in advance for any thoughts/suggestions.

Re: Widen Expand Widget button and display text instead of icon

DavidMarley — Sun, 12 Dec 2021 16:15:09 GMT

We figured out a solution for this using CSS - the main thing being hiding the icon so the fallback text displays instead. Then we widened the icon to accommodate the text label.

Here is the CSS we apply (note in the Expand widget expandTooltip = 'Legend', hence we can select that element via title='Legend'):

div[title='Legend' i] {
 width: 62px;
 height: 32px;
 .esri-collapse__icon {
 display: none;
 }
 .esri-icon-font-fallback-text {
 width: auto;
 height: 13px;
 clip: auto;
 font-size: 12px;
 font-family: arial !important;
 }
}

Re: Widen Expand Widget button and display text instead of icon

_____ — Wed, 16 Nov 2022 18:06:02 GMT

Is there a better solution than this now? Id' rather not mess with CSS for this. I see Expand has a label property, but I'm not sure what it even does.