+- 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: img in front of text / value (/showthread.php?tid=4055)
img in front of text / value - cdebackere - 23.05.2022
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
RE: img in front of text / value - admin - 23.05.2022
This can be done with :after/:before pseudo-elements:
https://css-tricks.com/almanac/selectors/a/after-and-before/
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
RE: img in front of text / value - cdebackere - 23.05.2022
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
RE: img in front of text / value - admin - 23.05.2022
Post an image of what you are trying to accomplish.
RE: img in front of text / value - cdebackere - 23.05.2022
(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-style
olid;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
RE: img in front of text / value - admin - 24.05.2022
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;
}RE: img in front of text / value - cdebackere - 24.05.2022
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>
RE: img in front of text / value - admin - 24.05.2022
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;
}RE: img in front of text / value - cdebackere - 24.05.2022
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
RE: img in front of text / value - admin - 24.05.2022
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.
RE: img in front of text / value - cdebackere - 24.05.2022
(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