topic Re: change on-screen icon size in ArcGIS Web AppBuilder Questions

change on-screen icon size

DaveOrlando — Sun, 12 Dec 2021 00:53:04 GMT

hello,

I'm sure the developers are probably tired of us mucking in their code, but I really want to make my on-screen icons bigger.

I found where to change the size of the image within the icon, but not the icon itself, it gets overwritten from the 'Inline style'

this is in ~\jimu.js\css\jimu.css

/*css for PreloadWidgetIcon dijit*/
.jimu-widget-onscreen-icon{
  width: 105px; /*added*/
  height: 105px; /*added*/
  position: absolute;
  cursor: pointer;
  border-radius: 4px;
}
.jimu-widget-onscreen-icon img{
  width: 80px; /*changed*/
  height: 80px; /*changed*/
  margin: 10px;
}

if there is some easy code to change, please let me know, thanks.

Re: change on-screen icon size

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:53:06 GMT

Dave,

The hard coding of the 40px comes from the LayoutMnager.js in the jimu folder (see line 21-24):

_createPreloadWidgetIcon: function(widgetConfig){
      var iconDijit = new OnScreenWidgetIcon({
        panelManager: this.panelManager,
        widgetManager: this.widgetManager,
        widgetConfig: widgetConfig,
        configId: widgetConfig.id,
        map: this.map
      });

      if(widgetConfig.position.relativeTo === 'map'){
        html.place(iconDijit.domNode, this.mapId);
      }else{
        html.place(iconDijit.domNode, this.id);
      }
      //icon position doesn't use width/height in config
      html.setStyle(iconDijit.domNode, utils.getPositionStyle({
        top: widgetConfig.position.top,
        left: widgetConfig.position.left,
        right: widgetConfig.position.right,
        bottom: widgetConfig.position.bottom,
        /*width: 40,
        height: 40*/
        width: 105,
        height: 105
      }));
      iconDijit.startup();

      if(!this.openAtStartWidget && widgetConfig.openAtStart){
        iconDijit.switchToOpen();
        this.openAtStartWidget = widgetConfig.name;
      }

      this.preloadWidgetIcons.push(iconDijit);
      return iconDijit;
    },

Re: change on-screen icon size

DaveOrlando — Fri, 22 Jan 2016 23:05:40 GMT

Thanks a million, I should have seen that.

here are the four steps I took to enlarge the icon, enlarge the image within, move one over, and change the panels open position.

Re: change on-screen icon size

Anonymous User — Sat, 08 Apr 2017 12:47:58 GMT

Does this still work? I'm having no luck adjusting the size of the placeholders

Re: change on-screen icon size

RobertScheitlin__GISP — Sat, 08 Apr 2017 23:19:13 GMT

Eoin,

No files have changed since then. Here are the steps and files for WAB 2.4: (if just enlarging them x2)

This is for image inside of icon
- jimu.js/css/jimu.css
- .jimu-widget-onscreen-icon img{
  width: 40px;
  height: 40px;
  margin: 20px;
  }
This is for the icon itself
- jimu.js/LayoutManager.js
- lines 695, 696, 728 and 729
  - adjust width and height to 80.
This is to move the second and third icons over
- Main config.json
  - Change left to 145 and 235 to the second and third
This is to change widget panel opening location
- jimu.js/OnScreenWidgetPanel.js
  - _getPositionInfo function lines 324 and 328
    - Change 40 to 80

Re: change on-screen icon size

Anonymous User — Mon, 10 Apr 2017 14:28:11 GMT

Thank you for you help Robert, I wasn't seeing any changes within WAB because I was editing files in the stemapp folder rather than the specific app folder, silly mistake I know!

Re: change on-screen icon size

CCWeedcontrol — Sun, 12 Dec 2021 00:53:09 GMT

I am having trouble making the onscreen-icon image bigger. I am on WAB 2.4.

I am editing the \server\apps\6\jimu.js\css at lines but my icons are not bigger, what i am doing wrong?

I made changes to the LayoutManger.js and that worked fine.

/*css for PreloadWidgetIcon dijit*/
.jimu-widget-onscreen-icon{
  position: absolute;
  cursor: pointer;
  border-radius: 4px;
}
.jimu-widget-onscreen-icon img{
  width: 40px; /*changed from 20 to 40*/
  height: 40px; /*changed from 20 to 40*/
  margin: 10px;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: change on-screen icon size

RobertScheitlin__GISP — Fri, 14 Apr 2017 21:27:38 GMT

I am not sure what you are missing. I don't think I can explain or outline it any further. Make sure you are changing the files for the app you are working in.

Re: change on-screen icon size

CCWeedcontrol — Mon, 17 Apr 2017 15:06:45 GMT

I am editing the \server\apps\6\jimu.js\css.

Would it have something to do with the fact that two icons are not original WAB icons?

Re: change on-screen icon size

RobertScheitlin__GISP — Mon, 17 Apr 2017 16:33:44 GMT

You have completed the other steps outlined in this thread beside the css portion right?

Re: change on-screen icon size

CCWeedcontrol — Wed, 19 Apr 2017 16:55:07 GMT

I didn't not complete the other outlined steps. I didn't because i am not sure where excellently i need to edit the Main Config.json file of the application or of WAB 2.4? I do not see anything "lef": 145 in my app Config.json file. I am using the launch pad theme.

This is to move the second and third icons over

Main config.json
- Change left to 145 and 235 to the second and third

Re: change on-screen icon size

RobertScheitlin__GISP — Thu, 20 Apr 2017 14:19:23 GMT

I have not attempted this with the launchpad theme.

Re: change on-screen icon size

RobertScheitlin__GISP — Thu, 20 Apr 2017 14:33:10 GMT

CC Weedcontrol,

For the launchpad the css location and numbers are different, along with the main config.json being "right" not "left"

The css file to change is [instal dir]\server\apps\[app #]\themes\LaunchpadTheme\styles\default\css\jimu-override.css (same css rule).

You will have to play with the numbers yourself.

Re: change on-screen icon size

GeorgeKatsambas — Tue, 02 May 2017 18:30:37 GMT

Where in the main cofig.json is the change 'left" ?

Re: change on-screen icon size

RobertScheitlin__GISP — Tue, 02 May 2017 18:50:21 GMT

In the widgetOnScreen array the widgets objects that have a placeholderIndex property.

Re: change on-screen icon size

StephanieKölker — Wed, 09 Aug 2017 07:35:39 GMT

For WAB 2.5 the custimization of On-Screen-Widgets gets a little bit easier, I would suggust. I did the following steps:

jimu.js/css/jimu.css
.jimu-widget-onscreen-icon img{
width: [yourWidgetSize];
height: [yourWidgetSize];
margin: [yourWidgetSize];
}
BaseLayoutManager:
- _createOnScreenWidgetIcon: funktion() -> Change jimuUtils.getPositionStyle({}) - Submethod with:
  - width: [yourWidgetSize];
  - height: [yourWidgetSize];

Kind Regards

Stephanie

Re: change on-screen icon size

GeorgeKatsambas — Wed, 09 Aug 2017 19:23:54 GMT

which file does this occur in?

Re: change on-screen icon size

StephanieKölker — Thu, 10 Aug 2017 17:43:57 GMT

Hi George,

the files are in the jimu.js folder. The BaseLayoutManager is in the folder layoutManagers.

Does this answer your question?

Re: change on-screen icon size

CCWeedcontrol — Wed, 31 Jan 2018 19:01:29 GMT

I've tried lots of times to increase the icon size on multiple apps but i've never been successful. Stephanie, I tried your recommendation but i get the same results. The icon shadow size goes bigger but the actual icon picture stays the same. I am currently testing this on WAB 2.7.

Re: change on-screen icon size

RobertScheitlin__GISP — Wed, 31 Jan 2018 19:56:22 GMT

Start a new question and I will show you how to do this in 2.7