topic Re: How can I make the legend dimensions smaller? Too much white space in Web AppBuilder Custom Widgets Questions

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

MelissaTraverso — Wed, 04 Oct 2017 21:34:03 GMT

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

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

RobertScheitlin__GISP — Thu, 05 Oct 2017 12:53:31 GMT

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

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

MTorres — Tue, 14 Nov 2017 21:17:36 GMT

Could you provide a bit more details for newbies please?

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

RobertScheitlin__GISP — Tue, 14 Nov 2017 21:28:50 GMT

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.

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

MTorres — Tue, 21 Nov 2017 13:57:21 GMT

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

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

RobertScheitlin__GISP — Tue, 21 Nov 2017 14:54:13 GMT

Are you working with WAB on AGOL or WAB Dev?

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

MTorres — Tue, 21 Nov 2017 15:21:10 GMT

WAB on AGOL

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

RobertScheitlin__GISP — Wed, 22 Nov 2017 01:30:07 GMT

Then edits like this are not possible.

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

SaffiaHossainzadeh2 — Wed, 13 Mar 2019 18:58:48 GMT

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

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

RobertScheitlin__GISP — Thu, 14 Mar 2019 15:10:36 GMT

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

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

SaffiaHossainzadeh2 — Thu, 14 Mar 2019 15:46:56 GMT

Hmm...that doesn't work for me. I added line 205 to the config.json:

I similarly added "height":125 to a position property in a widgetPool section of config.json. And nothing happened. I tried adding a new position property at other spots inside the legend widget (like after line 177), but none of my attempts were successful. Am I missing something?

Just for completeness, I was able to adjust the legend size as I intended using an entirely different method. I added the following css tag in the index.html file:

.jimu-pocket-panel {
height: 95px !important;
width: 220px !important;
}

It would not work without the !important part.

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

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:01:31 GMT

Saffia,

You are heading in the wrong direction. Here is what I am talking about. (line 6 was added).

      {
        "position": {
          "left": 205,
          "top": 45,
          "relativeTo": "map",
          "height": 125
        },
        "placeholderIndex": 1,
        "id": "_8",
        "version": "2.11",
        "closeable": true,
        "uri": "widgets/Legend/Widget",
        "name": "Legend",
        "label": "Legend_2",
        "config": "configs/Legend/config__8.json"        
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

SaffiaHossainzadeh2 — Thu, 14 Mar 2019 16:10:06 GMT

That didn't work for me straight away. I will try some more though.

Thanks a lot for your input!