img in front of text / value

[cdebackere]

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

[admin]

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

[cdebackere]

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

[admin]

Post an image of what you are trying to accomplish.

[cdebackere]

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-styleolid;
  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

[admin]

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

[cdebackere]

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>

[admin]

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

[cdebackere]

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

[admin]

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.

[cdebackere]

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