Custom image in expand widget not rendered correctly

StephM · ‎03-25-2024

Hello everybody,
I hope that you will be able to help me on a tricky bug...

I have a web application based on custom widgets.
That widgets are openend using "expand" help tool ... Everything is ok ... but.
I recently upgraded to the latest SDK version and my previous implementation is not correct anymore.

I use a custom IconClass that render an image in the expand button.
Now, my picture is "cropped"...

Do you have any suggestion to avoid that ?

I see that in the css there is a calculated css rule...

Many thaks in advance.
I share with you what I mean:

Basically it's only base64 url behind a css class

Egge-Jan_Pollé · ‎03-25-2024

Hi @StephM,

Can you please share the code snippet where you add your icons? In that way it will be easier for the community to provide suggestions on what to change to make it work (again) in the 4.29 version of the ArcGIS Maps SDK for JavaScript.

I can provide you with an example - using an svg instead of base64, so maybe not completely what you are looking for... - that works fine in 4.29:

function createZoomEntireCountryBtn() {
  const zoomEntireCountryBtnDiv = document.createElement('div');
  zoomEntireCountryBtnDiv.innerHTML = `
    <div id="zoomEntireCountryBtn" class="esri-component esri-widget--button esri-widget" role="button">
      <span title="Zoom uit op heel Nederland"><calcite-action><img src="nederland.svg" style="width:25px;height:25px;" alt="nederland"></calcite-action></span>
    </div>`;
  document.body.appendChild(zoomEntireCountryBtnDiv);
  document.getElementById("zoomEntireCountryBtn").addEventListener("click", zoomEntireCountry);
}

The actual file nederland.svg is 924x924 pixels in size, but renders perfectly on my custom button:

Hope you will find a solution (and - maybe - share it here to the benefit of the community :-))

Cheers,

Egge-Jan