Logic Machine Forum
Can't change image size in CSS as wanted - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Can't change image size in CSS as wanted (/showthread.php?tid=3911)

Can't change image size in CSS as wanted - Trond Hoyem - 03.03.2022

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.

RE: Can't change image size in CSS as wanted - admin - 03.03.2022

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

RE: Can't change image size in CSS as wanted - Trond Hoyem - 03.03.2022

(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?

RE: Can't change image size in CSS as wanted - admin - 03.03.2022

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

RE: Can't change image size in CSS as wanted - Trond Hoyem - 03.03.2022

(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.

RE: Can't change image size in CSS as wanted - admin - 03.03.2022

Try this CSS:
Code:
.smallIcon img {
  width: 5px !important;
  height: 5px !important;
}


RE: Can't change image size in CSS as wanted - Trond Hoyem - 03.03.2022

(03.03.2022, 10:09)admin Wrote: Try this CSS:
Code:
.smallIcon img {
  width: 5px !important;
  height: 5px !important;
}

That did it :-)

RE: Can't change image size in CSS as wanted - Leo681 - 23.04.2022

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

RE: Can't change image size in CSS as wanted - admin - 25.04.2022

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

RE: Can't change image size in CSS as wanted - Leo681 - 25.04.2022

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

   

Thanks

RE: Can't change image size in CSS as wanted - admin - 25.04.2022

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.