Hi I would like to trim the dimensions of my legend widget to be smaller. How do I do this? Currently there is too much white space and it covers up important parts of the map when you filter or zoom. I realize you can X out of it but this is inconvenient if you don't have the legend memorized as you're filtering or using another tool.
Thanks,
Melissa
Melissa,
You can set/add the height and width properties to the widget in the main config.json to decrease the size of the widget panel (by default the widget will be 400 x 410 px).
Could you provide a bit more details for newbies please?
Megan,
In the apps main config.json file (i.e. [install dir]\server\apps\[app#]\config.json) you will find the widgets section and then the legend widget. Assuming that you do not have the legend in the HeaderController widget then you will find a position property, just add a height and width to that. If you are talking about the legend being part of the headercontroller widget then you are out of luck there.
Could you show me a real life example of that path please? TIA
Are you working with WAB on AGOL or WAB Dev?
WAB on AGOL
Then edits like this are not possible.
Hi,
I've downloaded the source code of the web app (created from web app builder), and I'm trying to edit the config.json to make the legend smaller (in height), as suggested by Robert Scheitlin, GISP. There are two spots related to the Legend widget where the position property exists, and I've added "height": 125 in both spots. However no changes take place when I reload the app.
I've also tried inspecting the element in the google chrome developer tools. I find that the legend seems to be contained within this element:
<div class="jimu-panel jimu-pocket-panel" id="_19_panel" widgetid="_19_panel" style="left: auto; top: 10px; right: 15px; bottom: 10px; width: 360px; height: 125px; padding: 0px; z-index: 101; position: absolute;"></div>
Usually the height property is set to auto, but when I specify 125px for that style property, it changes the legend to the height I want! But I can't figure out how to export this change to my files that I launch the app from. How would I permanently edit my html or css file to reflect this change? I tried adding
.jimu-panel .jimu-pocket-panel{
height: 125px;
}
towards the top of the index.html page (where the other css styles are), but this did not work.
Any help would be appreciated!
Thanks!
Saffia
Saffia,
You can set/add the height and width properties to the widget in the apps main config.json to decrease the size of the widget panel (by default the widget will be 400 x 410 px).