topic Re: Change WAB 2.7 widget icon size Launchpad theme in ArcGIS Web AppBuilder Questions

Change WAB 2.7 widget icon size Launchpad theme

CCWeedcontrol — Wed, 31 Jan 2018 20:05:01 GMT

How does one change the widget icons sizes on WAB 2.7?

I am using launchpad theme.

Re: Change WAB 2.7 widget icon size Launchpad theme

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:09:07 GMT

CC,

This the numbers used below are for doubling the icons size:

In the [install dir]\server\apps\[app#]\themes\LaunchpadTheme\widgets\AnchorBarController\Widget.js

  var MIN_MARGIN = 16, ICON_SIZE = 80, ICON_IMG_SIZE = 40, BUTTON_SIZE = 60,
      NORMAL_MODE = 1, MOBILE_MODE = 2;‍‍

In the [install dir]\server\apps\[app#]\themes\LaunchpadTheme\styles\default\css\launchpad.css

Go to the bottom of the file and add these two new rules:

.jimu-anchorbar-iconitem .icon-item.dockable {
  margin-top: -45px;
}

.claro .jimu-anchorbar-iconitem .icon-item .icon {
  margin-top: 20px;
}‍‍‍‍‍‍‍

Re: Change WAB 2.7 widget icon size Launchpad theme

CCWeedcontrol — Wed, 31 Jan 2018 21:14:32 GMT

Thank you Robert but i meant the toggle buttons on the top right of the launchpad theme.

my apologies for forgetting that detail. Although this was useful i also wanted to make the bottom icon buttons bigger.

Re: Change WAB 2.7 widget icon size Launchpad theme

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:09:10 GMT

CC,

Well in that case, here is what you need:

In the [install dir]\server\apps\[app#]\themes\LaunchpadTheme\styles\default\css\launchpad.css

Go to the bottom of the file and add these two new rules:

.jimu-widget-onscreen-icon {
  width: 60px !important;
  height: 60px ! important;
}

.jimu-widget-onscreen-icon img {
  width: 32px;
  height: 32px;
  margin: 14px;
}‍‍‍‍‍‍‍‍‍‍

In the apps main config.json you will have to adjust the position paramaters for the onscreen widgets to add your desired spacing: (i.e. top and right)

        "position": {
          "right": 130,
          "top": 20,
          "relativeTo": "map"
        },‍‍‍‍‍

Re: Change WAB 2.7 widget icon size Launchpad theme

CCWeedcontrol — Wed, 31 Jan 2018 23:07:25 GMT

sweet, thank you!

Re: Change WAB 2.7 widget icon size Launchpad theme

Anonymous User — Mon, 04 Jun 2018 22:21:03 GMT

Robert Scheitlin, GISPthat worked nicely, in terms of anchor icon size! Double size was a wee bit much though!

On a related note, is increasing the # of widgets in AnchorBarController as simple a matter? I'm on 2.8. It seems to be a proportion of the viewport width although I didn't see where that was coming from in its widget.js.

Re: Change WAB 2.7 widget icon size Launchpad theme

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:09:12 GMT

Kevin,

It comes from several places in the widget.js. Lines like this:

domStyle.set(this.iconGroupNode, 'width',
              this.allConfigs.length * 2 * ICON_SIZE + 'px');‍‍

Re: Change WAB 2.7 widget icon size Launchpad theme

Anonymous User — Thu, 07 Jun 2018 20:19:28 GMT

Hi Robert, I had figured.. I saw those and it seemed a bit involved.

So I discovered a simpler setting.

I changed ....

373 widgetWidth = Math.floor(mapBox.w / 2);

to divide by 1

373 widgetWidth = Math.floor(mapBox.w / 1);

..et voila. Icons across the screen. I actually notched it down to 1.5 and it worked nicely, took up most but not all of the bottom screen.

Hope this helps all.