Trying to make border-box

Dashboard
1

I am trying to display a value with a UI-element by means of a template node. I use box-sizing: border-box; But now I am a bit stuck.

I have gotten this far:
afbeelding

What I am trying to do, and failing so far, is to loose the spaces between the boxes. And at the same time getting more space around the characters. Here is the code that I implemented so far:

Anyone has a suggestion?

<head>
<style>
    * {
        box-sizing: border-box;
    }

    .container {
        width: 100%;
    }
    
    .digitBlack {
        width: 12.5%;
        font-size: 200%;
        border: 1px solid white;
        font-weight: 700;
        color: white;
        background-color: black;
    }
    .digitRed {
        width: 12.5%;
        font-size: 200%;
        border: 1px solid white;
        font-weight: 700;
        color: white;
        background-color: red;
    }
    
 
</style>
</head>

<body>

    <div class="container">
        <span class="digitBlack">{{msg.payload[0]}}</span>
        <span class="digitBlack">{{msg.payload[1]}}</span>
        <span class="digitBlack">{{msg.payload[2]}}</span>        
        <span class="digitBlack">{{msg.payload[3]}}</span>
        <span class="digitBlack">{{msg.payload[4]}}</span>
        <span class="digitRed">{{msg.payload[6]}}</span>        
        <span class="digitRed">{{msg.payload[7]}}</span>
        <span class="digitRed">{{msg.payload[8]}}</span>        
    </div>

</body>
2

I did something similar lately. With animations and stuff ... Maybe you can get some ideas from that.

3

@hotNipi Woow, that is awesome. Little bit more complicated then what I am trying to achieve :smile: :smile: :smile:. Thanks for that!! I

4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.