This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

Can't change image size in CSS as wanted
#1
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.
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#2
You can set the size directly in the editor by changing the "Element size" values in the bottom right corner.
Reply
#3
(03.03.2022, 09:28)admin Wrote: 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.

(03.03.2022, 09:36)Trond Hoyem Wrote:
(03.03.2022, 09:28)admin Wrote: 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?
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#4
Which firmware are you using? In current version the minimum size for icons and images is 5x5.
Reply
#5
(03.03.2022, 10:00)admin Wrote: 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.
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#6
Try this CSS:
Code:
.smallIcon img {
  width: 5px !important;
  height: 5px !important;
}
Reply
#7
(03.03.2022, 10:09)admin Wrote: Try this CSS:
Code:
.smallIcon img {
  width: 5px !important;
  height: 5px !important;
}

That did it :-)
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#8
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
Reply
#9
Post a screenshot on where exactly you want to change the icon size.
Reply
#10
Hello, here is, this icons i cant make smaller but no bigger.

   

Thanks
Reply
#11
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.
Reply


Forum Jump: