topic Re: ArcGIS Experience Builder Widget icon size in ArcGIS Experience Builder Questions

ArcGIS Experience Builder Widget icon size

MajeedP — Sat, 25 Nov 2023 19:56:10 GMT

I have a custom widget that is added to a widget controller. I am able to add an icon to the widget using this section in the widget settings:

the problem is that the size of the image inside the icon, follows jimu-icon height and width and can't be changed:
<img src="mypng url" width="16" height="16" class="jimu-icon" alt="">

I have tried everything including changing the css in widget.tsx, but the css only applies to the element only after the widget is clicked. when the widget is opened, the size changes and the img inside icon has a larger size. I also tried to programatically change the style and attribute of the element inside the componentDidMount method of the widget, however still no luck. I played with the jimu-icon settings a bit, I changed the size of the config.json in ..\ArcGISExperienceBuilder\server\public\apps\3\resources\config like this:

"icon": {
"svg": "${appResourceUrl}/images/icon_picker_in_setting/1700936360929.png",
"properties": {
"filename": "1700936360929.png",
"originalName": "pngegg.png",
"path": "${appResourceUrl}/images/icon_picker_in_setting/1700936360929.png",
"isUploaded": true,
"inlineSvg": false,
"size":22
}
but seems like the size attribute doesn't change.

I have done the same with the default icon.svg in the widget folder itself, but still no luck. Any help will be much appreciated.

Re: ArcGIS Experience Builder Widget icon size

JeffreyThompson2 — Mon, 27 Nov 2023 16:08:50 GMT

The best way to alter the button sizes is to alter the css. This can either be in the style.scss of your theme or in a custom widget that is always open (i.e. not in a widget controller or on a different page or view). You will want to use a compound selector to prevent other icons from also being altered. This one should work.

.avatar-button .jimu-icon { height: 50px; width: 50px; }

Re: ArcGIS Experience Builder Widget icon size

MajeedP — Tue, 28 Nov 2023 18:10:28 GMT

Thanks Jeffrey,

I can't have a widget which is always open. where is the style.css of my theme? I don't see a style.css anywhere.

Re: ArcGIS Experience Builder Widget icon size

JeffreyThompson2 — Tue, 28 Nov 2023 18:48:10 GMT

You will need to create it. Here is the theme development guide.

Re: ArcGIS Experience Builder Widget icon size

MajeedP — Tue, 28 Nov 2023 23:04:02 GMT

Thanks a lot for your help Jeffrey,

I created a style.scss file in the themes folder, as instructed in the link you sent, and added your code to it. npm started client and server. Nothing changed, still using the default width and height of 16:

Re: ArcGIS Experience Builder Widget icon size

JeffreyThompson2 — Wed, 29 Nov 2023 13:10:19 GMT

Did you select your custom theme in the build mode?

Re: ArcGIS Experience Builder Widget icon size

MajeedP — Wed, 29 Nov 2023 17:44:16 GMT

Not sure what you mean by build mode. If you are referring to this page, I can select one of these and even if I click customize it allows me to change font and colors.

Here what I see in the customize screen:

Re: ArcGIS Experience Builder Widget icon size

MajeedP — Wed, 29 Nov 2023 17:51:51 GMT

Please note that I don't want to create a new theme, I just want to override this single css rule.

Re: ArcGIS Experience Builder Widget icon size

MajeedP — Wed, 29 Nov 2023 18:14:48 GMT

This is what worked for me. I added all the files of a new theme. I left all empty except for the style.scss in which I added the style. Then selected my theme in the build mode and the change to the style was applied:

Re: ArcGIS Experience Builder Widget icon size

JeffreyThompson2 — Wed, 29 Nov 2023 18:31:27 GMT

Great. Those are exactly the missing steps. I did not fully explain.

Re: ArcGIS Experience Builder Widget icon size

LakshanaRajendran — Wed, 17 Jan 2024 10:02:52 GMT

Hi @MajeedP,

Can you please elaborate on what is build mode and the procedure to select the theme in build mode?

Re: ArcGIS Experience Builder Widget icon size

JeffreyThompson2 — Wed, 17 Jan 2024 13:19:44 GMT

The build mode is this screen where you can actually construct your Experience. To select a theme, click the palette icon and select the theme of your choice in the sidebar. If you have made a custom theme, it should be in this list.