Possible padding around custom icon image?

210
6
Jump to solution
07-31-2019 07:14 AM
JaneCopeland1
New Contributor II

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?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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;
}‍‍‍‍‍

View solution in original post

0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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?

0 Kudos
JaneCopeland1
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
JaneCopeland1
New Contributor II

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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;
}‍‍‍‍‍
0 Kudos
JaneCopeland1
New Contributor II

That works. Thanks.

0 Kudos