Product: PowerShell Universal
Version: 5.0.7
Feeling a little stupid for even having to ask this, but I’m trying to generate a dot matrix with different colors to represent quick status for a large number of data points. So, I’ve defined my (granted, very minimal) custom component as follows:
#region Define device indicator dots
function New-MDMDeviceIndicator($Device) {
return New-UDHtml -Markup "<div id='Indicator_$Device' style='width:12px;height:12px;background-color:$($null -eq $Device ? "gray" : "green");border-radius:50%;' />"
}
#endregion Define device indicator dots
This looks great! Except it doesn’t:
I would like the dot matrix to expand horizontally, with an inline-block
display style. I’ve also tried using <span />
elements instead, but these are not the root of the issue; rather, how the New-UDHtml
is being rendered in the DOM:
Each of my HTML elements are nested within a “bald” and inaccessible <div>
element… so it’s forcing the elements to render on their own line due to the nature of <div>
s being of block
display type.
I can use some JS to do some node tree traversal to alter the display style but that doesn’t seem very in-the-spirit of things, and I’m also trying to minimize the use of JS and HTML in general as much as possible for readability by my less JS-comfortable colleagues.
So, what other methods could I use? I’m sure I’m just missing something or coming at the problem from the wrong angle, but please enlighten me if that is the case!
ZG