Can't change image size in CSS as wanted

[Trond Hoyem]

Hi

I have a visualisation where there is one page with a lot of lamps that are controlled individually. I have added an image for each linked to the group addresses, and this works.

To be able to match it all to the background drawing, I need to make the images smaller. I have then added a class called "smallIcon" and added the following in CSS;

Code:

.smallIcon {

  width: 5px !important;
  height: 5px !important;
 
}

But when I refresh the page,  the width seems to have changed, but not the height. According to the inspect, the height should be 5px, but in the visualisation, the images are rectangular, and so some of them overlaps when they are very close. 

Any idea what I can do to change it?

I have also tried the following in Custom JS:

Code:

$(".smallIcon").find("img").css({ "width": "5px", "height": "5px" });

But the final visu still looks the same.

[admin]

You can set the size directly in the editor by changing the "Element size" values in the bottom right corner.

[Trond Hoyem]

You can set the size directly in the editor by changing the "Element size" values in the bottom right corner.

I know, but it does not allow me to set size smaller than 16x16, and that is too big in this drawing.

---

You can set the size directly in the editor by changing the "Element size" values in the bottom right corner.

I know, but it does not allow me to set size smaller than 16x16, and that is too big in this drawing.

I see from the inspect widow that there is a sub-div to the div that has the name "icon". The size of that one is only changed in the width, not the height. But the main-div has the 8x8 px size.

I guess that might mean something?

[admin]

Which firmware are you using? In current version the minimum size for icons and images is 5x5.

[Trond Hoyem]

Which firmware are you using? In current version the minimum size for icons and images is 5x5.

20170927. So not newest version.

But the thing is that the customer says that id did work before, and for some unknown reason, it has now stopped working. So if I can fix it in CSS, that would be preferred.

[admin]

Try this CSS:

Code:

.smallIcon img {
  width: 5px !important;
  height: 5px !important;
}

[Trond Hoyem]

Try this CSS:

Code:

.smallIcon img {
  width: 5px !important;
  height: 5px !important;
}

That did it :-)

[Leo681]

Hello,

I have tryed and at touch visualization works to make the icons smaller, but it doesnt work to make biggers, i dont know why, i have tryed to add big icons on the icons.

Any idea?

Thanks

[admin]

Post a screenshot on where exactly you want to change the icon size.

[Leo681]

Hello, here is, this icons i cant make smaller but no bigger.

   

Thanks

[admin]

Unfortunately it's rather complicated. If you want to make icons larger then many other properties have to be changed (control line height, control positions etc). Alternative solution is to zoom the whole page using CSS transform but it also not trivial.