Widen Expand Widget button and display text instead of icon

688
1
Jump to solution
03-02-2020 03:30 PM
DavidMarley
Occasional Contributor II

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.

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
DavidMarley
Occasional Contributor II

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

View solution in original post

0 Kudos
1 Reply
DavidMarley
Occasional Contributor II

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;
 }
}
0 Kudos