topic Possible padding around custom icon image? in ArcGIS Web AppBuilder Questions

Possible padding around custom icon image?

JaneCopeland1 — Wed, 31 Jul 2019 14:14:07 GMT

I'm using a custom image for a widget in the Launchpad app. The image is the same size as the esri standard images - 50x50px but mine seems to have some sort of padding around it. The image doesn't fill the whole space of the button as the standard esri images do. I've followed the information in other threads to make the images larger. I can get the image larger but my image still doesn't fill the whole available space. I've included a picture of what it looks like. Is there a way to make the image fill the whole button?

Re: Possible padding around custom icon image?

RobertScheitlin__GISP — Wed, 31 Jul 2019 14:30:56 GMT

Jane,

Even the esri icons have a certain padding. Does your image have a area around it that is transparent already so that it displays as a circle?

Re: Possible padding around custom icon image?

JaneCopeland1 — Wed, 31 Jul 2019 14:38:43 GMT

Robert - thanks for the quick reply. The only transparency is on the corners. The image itself fills the canvas.

Re: Possible padding around custom icon image?

RobertScheitlin__GISP — Wed, 31 Jul 2019 14:41:59 GMT

Jane,

It appears to me if you measure the square esri default icons and compare it to your round icons width and height, you will see that they have an equal amount of padding and it is acting like it should.

Re: Possible padding around custom icon image?

JaneCopeland1 — Wed, 31 Jul 2019 15:41:26 GMT

Robert - is there a way to shrink the padding around just that image?

By the way - congratulations on your award at the conference in San Diego. Much deserved. I used to work with the Flex app and you were a great help in that community as well.

Re: Possible padding around custom icon image?

RobertScheitlin__GISP — Sat, 11 Dec 2021 11:01:53 GMT

Jane,

You would have to increase the img height and width and remove or make the margin-top smaller.

So something like add this new css rule to the end of the common.css file in the launchpad theme.

.claro .jimu-anchorbar-iconitem .icon-item .icon {
  width: 30px !important;
  height: 30px !important;
  margin-top: 5px !important;
}‍‍‍‍‍‍‍‍‍‍

Re: Possible padding around custom icon image?

JaneCopeland1 — Wed, 31 Jul 2019 16:23:00 GMT

That works. Thanks.