How to set my image for expand widget button icon

1885
4
Jump to solution
06-23-2020 11:12 PM
MichaelLev
Occasional Contributor III

In ArcGIS Web Appbuilder (developer edition) I want to add custom widget for specific task, which will be activated by an Expand widget button.

I see that the Expand button has a limited repertoire of icons from

https://esri.github.io/calcite-web/documentation/icons/

but what is the way (if any) to show a png image that I'll prepare myself (not from the suggested repertoire)?

If there is a way, but what is needed is an icon and not png image, then - How would I prepare that icon?

0 Kudos
1 Solution

Accepted Solutions
MichaelLev
Occasional Contributor III

Thank you for your help!

*מיכאל לאב - *Michael Lev

054-7718425

On Thu, Jun 25, 2020 at 12:02 AM Robert Scheitlin, GISP <geonet@esri.com>

View solution in original post

0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Emeritus

Michael,

   So since you are talking about WAB and the expand widget (which is JS API 4.x widget) I assume you are working in a 3D WAB app then right?

0 Kudos
MichaelLev
Occasional Contributor III

yes. I'm developing 3D WAB app ,

*מיכאל לאב - *Michael Lev

054-7718425

On Wed, Jun 24, 2020 at 3:10 PM Robert Scheitlin, GISP <geonet@esri.com>

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Michael,

   So these css rule overrides are assuming you have the basemap widget in the expand. Adjust according to your actual used widget.

      .esri-collapse__icon.esri-icon-collapse:before,
      .esri-collapse__icon.esri-expand__icon--expanded.esri-icon-collapse{
        content" ";
        background-imageurl("images/forward.png");
        width25px;
        height25px;
      }
      .esri-collapse__icon.esri-icon-basemap,
      .esri-collapse__icon.esri-icon-basemap:before {
        content" ";
        background-imageurl("images/backward.png");
        width25px;
        height25px;
      }
MichaelLev
Occasional Contributor III

Thank you for your help!

*מיכאל לאב - *Michael Lev

054-7718425

On Thu, Jun 25, 2020 at 12:02 AM Robert Scheitlin, GISP <geonet@esri.com>

0 Kudos