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.

img in front of text / value
#1
can I force, with custom css, to add an img (small icon) in front of the value label of an object ?

The reason I can not just put a static img, is because text/value needds to be right aligned, so position of img follows from text length
Don't ask what we can do in KNX but wonder what we can't - www.KNXlogic.eu
Reply
#2
This can be done with :after/:before pseudo-elements:
https://css-tricks.com/almanac/selectors...nd-before/
https://developer.mozilla.org/en-US/docs...SS/::after
Reply
#3
OK, now I better understand the custom slider css better as well (uses before)

but I tried to define a custom style class, and it fails. In the CSS editor the '.item-value' is in red. I guess CSS does not allow the like the 'resurcive' style listing.

.BOimageText .item-control::before {
content : "/scada/resources/img/BOlistgrey.svg";
}

My apologies for my CSS ignorance if I ask stupid questions
Don't ask what we can do in KNX but wonder what we can't - www.KNXlogic.eu
Reply
#4
Post an image of what you are trying to accomplish.
Reply
#5
(23.05.2022, 16:22)admin Wrote: Post an image of what you are trying to accomplish.

We've made a BluOs KNX (& modbus & BACnet) gateway library / gateway and for the visualisation we're constructing as attached (just a prelim version).
On the top right you see 2 boxed texts, currently left aligned, which open a widget

In front of the text is an icon. This is now a seperate img element.

But we want to right align those 2 elements (in fact the top one is an object with dynamic content depending on player grouping, the one below is a text label)

For the rounded bow we havea custom css class:
.BWgroupBorder {
  border-styleConfusedolid;
  border-width: 2px;
  border-color:#E5E5E5;
  border-radius: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-right: 8px;
  padding-left: 28px;
}

the left padding creates the space for the img at size 16x16

Cheers,
Christof

Attached Files Thumbnail(s)
   
Don't ask what we can do in KNX but wonder what we can't - www.KNXlogic.eu
Reply
#6
Code:
.BWgroupBorder:after {
  display: block;
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url(/scada/resources/icons/alarm-active.svg);
  top: 6px;
  left: 6px;
}
Reply
#7
nearly there:
- item is there : div.item.item-control.BWgroupBorder.item-value::after
- The 16x16 box is there, but empty. Checked url and is correct.

inspector: no trace of img/url/..

<div class="item item-control BWgroupBorder item-value" style="top: 13px; left: 480px; z-index: 71; font-size: 14px; color: rgb(229, 229, 229);">
"Bureau"
::after
</div>
Don't ask what we can do in KNX but wonder what we can't - www.KNXlogic.eu
Reply
#8
Try with PNG image instead (even though SVG works for me):
Code:
.BWgroupBorder:after {
  display: block;
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url(/scada/resources/images/visualization.png);
  background-size: contain;
  top: 6px;
  left: 6px;
}
Reply
#9
OK, works indeed with png
and found the issue with the svg as well. Works also now.

But the width and height statements are just cropping the top 16x16 corner, rather than rescaling the img to 16x16

Can that be solved? THe inspector does not use strikethrough on the 2 settings, so 'important' won't fix
I can rescale the images of course and upload several versions, but that seems like a last resort ... call me lazy Wink
Don't ask what we can do in KNX but wonder what we can't - www.KNXlogic.eu
Reply
#10
Which browser and version are you using? background-size: contain; resizes the image to fit inside the container. You can change that to background-size: 100%; which is acts the same for square images.
Reply
#11
(24.05.2022, 13:58)admin Wrote: Which browser and version are you using? background-size: contain; resizes the image to fit inside the container. You can change that to background-size: 100%; which is acts the same for square images.

both did the trick

I was currently working with Chrome, Version 101.0.xxx

THanks for your patient assistance
Don't ask what we can do in KNX but wonder what we can't - www.KNXlogic.eu
Reply


Forum Jump: