How can I make the legend dimensions smaller? Too much white space

MelissaTraverso · ‎10-04-2017

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

RobertScheitlin__GISP · ‎10-05-2017

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).

MTorres · ‎11-14-2017

Could you provide a bit more details for newbies please?

RobertScheitlin__GISP · ‎11-14-2017

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.

MTorres · ‎11-21-2017

Could you show me a real life example of that path please? TIA

RobertScheitlin__GISP · ‎11-21-2017

Are you working with WAB on AGOL or WAB Dev?

MTorres · ‎11-21-2017

WAB on AGOL

RobertScheitlin__GISP · ‎11-21-2017

Then edits like this are not possible.

SaffiaHossainzadeh2 · ‎03-13-2019

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:

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

RobertScheitlin__GISP · ‎03-14-2019

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).