topic Re: Widget buttons are overlapping in WAB in ArcGIS Web AppBuilder Questions

Widget buttons are overlapping in WAB

joerodmey — Tue, 11 Sep 2018 15:05:19 GMT

My widget buttons 1 and 2 are overlapping each other in WAB (Image below). How do I fix this in the code?

Thanks

Re: Widget buttons are overlapping in WAB

RobertScheitlin__GISP — Tue, 11 Sep 2018 16:03:02 GMT

Attached image?...

Re: Widget buttons are overlapping in WAB

joerodmey — Tue, 11 Sep 2018 16:39:16 GMT

Hmmm...I've attached now

Re: Widget buttons are overlapping in WAB

RobertScheitlin__GISP — Tue, 11 Sep 2018 18:13:51 GMT

Joe,

Sorry you have cropped you image down so far I can not tell what the on screen widget placeholder is overlapping.

Re: Widget buttons are overlapping in WAB

joerodmey — Tue, 11 Sep 2018 19:06:39 GMT

That huge gap between buttons is my problem. Button 1 and 2 are on top of each other where the swap icon is. I can only have 3 widgets

Re: Widget buttons are overlapping in WAB

RobertScheitlin__GISP — Tue, 11 Sep 2018 19:36:42 GMT

Joe,

post your main config.json

Re: Widget buttons are overlapping in WAB

joerodmey — Tue, 11 Sep 2018 19:40:40 GMT

Config.json attached. Found in C:\arcgis-web-appbuilder-2.8\WebAppBuilderForArcGIS\server\apps\3

Re: Widget buttons are overlapping in WAB

RobertScheitlin__GISP — Sun, 12 Dec 2021 05:41:48 GMT

Joe,

So it looks like you have been making some manual edits to your config.json.

Here is the onscreen widget placeholder section fixed.

     {
        "position": {
          "left": 55,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 1,
        "id": "_25",
        "version": "2.8",
        "closeable": true,
        "uri": "widgets/LayerToggleButton/Widget",
        "name": "LayerToggleButton",
        "icon": "configs\\LayerToggleButton\\icon__25.png",
        "config": "configs/LayerToggleButton/config__25.json"
      },
      {
        "position": {
          "left": 105,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 1,
        "id": "_26",
        "version": "2.8",
        "closeable": true,
        "uri": ""
      },
      {
        "position": {
          "left": 155,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 1,
        "id": "_27",
        "name": "Query",
        "label": "Query requests by tenant",
        "version": "2.8",
        "closeable": true,
        "uri": "widgets/Query/Widget",
        "config": "configs/Query/config__27.json"
      },
      {
        "position": {
          "left": 205,
          "top": 45,
          "relativeTo": "map"
        },
        "placeholderIndex": 1,
        "id": "_28",
        "name": "Query",
        "label": "Query request type",
        "version": "2.8",
        "closeable": true,
        "uri": "widgets/Query/Widget",
        "config": "configs/Query/config__28.json"
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Widget buttons are overlapping in WAB

ElizabethDonahue — Wed, 20 Nov 2019 22:14:22 GMT

Robert,

I am having this exact issue in Enterprise Portal WAB and have not changed the config file. Is there a way to fix this without editing the config.json file ( too nervous!) see below left where two icons are on top of each other.

Thanks for your time!

Beth

Re: Widget buttons are overlapping in WAB

RobertScheitlin__GISP — Wed, 20 Nov 2019 22:30:36 GMT

There is not a way that I am aware of beside editing the config.json

Re: Widget buttons are overlapping in WAB

ElizabethDonahue — Wed, 20 Nov 2019 22:32:34 GMT

Thanks for your quick reply. I will read up on editing the config file!