ArcGIS Experience Builder Widget icon size

843
11
Jump to solution
11-25-2023 11:56 AM
MajeedP
New Contributor II

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:

MajeedPooyandeh_0-1700941632091.png

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. 

 

1 Solution

Accepted Solutions
JeffreyThompson2
MVP Regular Contributor

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

GIS Developer
City of Arlington, Texas

View solution in original post

0 Kudos
11 Replies
JeffreyThompson2
MVP Regular Contributor

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;
}
GIS Developer
City of Arlington, Texas
0 Kudos
MajeedP
New Contributor II

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.  

0 Kudos
JeffreyThompson2
MVP Regular Contributor

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

GIS Developer
City of Arlington, Texas
0 Kudos
MajeedP
New Contributor II

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:

MajeedP_0-1701212622075.png

 





0 Kudos
JeffreyThompson2
MVP Regular Contributor

Did you select your custom theme in the build mode?

GIS Developer
City of Arlington, Texas
0 Kudos
MajeedP
New Contributor II

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. 

MajeedP_0-1701279807539.png

Here what I see in the customize screen:

MajeedP_1-1701279844436.png

 



0 Kudos
MajeedP
New Contributor II

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

0 Kudos
MajeedP
New Contributor II

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:

MajeedP_0-1701281670262.png

 

 

JeffreyThompson2
MVP Regular Contributor

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

GIS Developer
City of Arlington, Texas
0 Kudos