# Fill label space with dots

**URL:** <https://forum.inductiveautomation.com/t/fill-label-space-with-dots/23440>\
**Category:** Ignition\
**Tags:** ignition79\
**Created:** [March 19, 2019, 2:35pm UTC](https://forum.inductiveautomation.com/t/fill-label-space-with-dots/23440 "2019-03-19T14:35:32Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![oisin.gribben](https://avatars.discourse-cdn.com/v4/letter/o/9d8465/32.png) [@oisin.gribben](https://forum.inductiveautomation.com/u/oisin.gribben)\
**Post date:** [March 19, 2019, 2:35pm UTC](https://forum.inductiveautomation.com/t/fill-label-space-with-dots/23440/1 "2019-03-19T14:35:32Z")

</div>

We want to display a label with the tagname and the left side and the value on the right.  
The label will always be the same width but we want to fill the space in the middle with dots.  
Is there a way of doing this with a label ?  
Similar idea to the image below  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/c/c8b8aaee5e5ed9711a028a97deca89adc244040b.png)

---

<div class="post-metadata">

**Author:** ![mrogers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mrogers/32/4110_2.png) [@mrogers](https://forum.inductiveautomation.com/u/mrogers)\
**Post date:** [March 19, 2019, 3:19pm UTC](https://forum.inductiveautomation.com/t/fill-label-space-with-dots/23440/2 "2019-03-19T15:19:25Z")

</div>

Do you need this to be dynamic? Like label text changing, adding or removing label rows, etc? I think there are ways to do both, but dynamic can get a bit complicated.

For static:  
First, use a line across the space you want to fill and change the stroke style to dashed.  
Then, make the label (lets say the ‘AC Deluxe’) and width to just fit the text. Make the background opaque and color match the real background behind the label. Then, the label should be on top of the dashed line and should give you the look you want.

---

<div class="post-metadata">

**Author:** ![oisin.gribben](https://avatars.discourse-cdn.com/v4/letter/o/9d8465/32.png) [@oisin.gribben](https://forum.inductiveautomation.com/u/oisin.gribben)\
**Post date:** [March 19, 2019, 3:22pm UTC](https://forum.inductiveautomation.com/t/fill-label-space-with-dots/23440/3 "2019-03-19T15:22:25Z")

</div>

@mrogers So overlay a label on top of the dashed line?  
We created it this way but wanted to see was there a way of making it in 1 label.  
For the dynamic I just used a html text background to cover over the dots.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 19, 2019, 3:42pm UTC](https://forum.inductiveautomation.com/t/fill-label-space-with-dots/23440/4 "2019-03-19T15:42:35Z")

</div>

Two ways to do this through expressions:

```auto
stringFormat("%s%s%s", 
	"Label",
	repeat("-", 50 - (len("Label") + len("$2500"))),
	"$2500"
)

```

```auto
replace(stringFormat("%-45s%s", 
	"Label",
	"$2500"
), " ", "-")

```

I like the latter a bit more, myself - no need to specify your different elements multiple times. Java’s string formatting operators let you enter a fixed amount of padding (that is, `%-20s` will add spaces to the right of the string until it hits 20 characters), which you can then use to pad out your string. Then just append your currency value to the end.

---

<div class="post-metadata">

**Author:** ![oisin.gribben](https://avatars.discourse-cdn.com/v4/letter/o/9d8465/32.png) [@oisin.gribben](https://forum.inductiveautomation.com/u/oisin.gribben)\
**Post date:** [March 19, 2019, 3:57pm UTC](https://forum.inductiveautomation.com/t/fill-label-space-with-dots/23440/5 "2019-03-19T15:57:16Z")

</div>

> [@paul-griffith](#):
>
> stringFormat("%s%s%s", "Label", repeat("-", 50 - (len("Label") + len("$2500"))), "$2500" )

Thanks @paul-griffith with a bit of tweaking the second one worked for it. Our label had some spaces in it too so it was replacing them with '.' ended up with

> replace(replace(stringFormat("%-45s%s",  
> replace("Datahall 2"," ","-"),  
> "250kW"  
> ), " ", ".")  
> ,"-"," ")

---

<div class="post-metadata">

**Author:** ![oisin.gribben](https://avatars.discourse-cdn.com/v4/letter/o/9d8465/32.png) [@oisin.gribben](https://forum.inductiveautomation.com/u/oisin.gribben)\
**Post date:** [March 19, 2019, 4:28pm UTC](https://forum.inductiveautomation.com/t/fill-label-space-with-dots/23440/6 "2019-03-19T16:28:38Z")

</div>

@paul-griffith  
Is there a way to make the text on the right filled right to the edge of the label.  
There is a bit of a gap to the right of each  
See 2 examples below  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/e/e3ad27f8d9ef5deb093a115ed1fc23a0be6dd0f3.png)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 19, 2019, 4:31pm UTC](https://forum.inductiveautomation.com/t/fill-label-space-with-dots/23440/7 "2019-03-19T16:31:26Z")

</div>

You could do the padding operation in the other direction for the other value - abbreviated, something like:  
`stringFormat("%-30s%30s", "Datahall 2222222", "250000")`  
The leading `-` in the padding specifier (`%-30s`) means pad to the left - omitting the `-` means pad to the right. If you do the same replacing operation again to replaces spaces with the same padding character throughout, you should get a consistent format.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 19, 2019, 6:35pm UTC](https://forum.inductiveautomation.com/t/fill-label-space-with-dots/23440/8 "2019-03-19T18:35:41Z")

</div>

> [@oisin.gribben](#):
>
> Is there a way to make the text on the right filled right to the edge of the label.

Consider switching to a fixed-width font.

---

<div class="post-metadata">

**Author:** ![mbai1](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@mbai1](https://forum.inductiveautomation.com/u/mbai1)\
**Post date:** [August 25, 2020, 2:10pm UTC](https://forum.inductiveautomation.com/t/fill-label-space-with-dots/23440/9 "2020-08-25T14:10:23Z")

</div>

Hello, I just wondering would that be possible to have long space for label component in perspective? because all the long space I created has just only shown one white space instead. Thanks!

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [August 25, 2020, 2:51pm UTC](https://forum.inductiveautomation.com/t/fill-label-space-with-dots/23440/10 "2020-08-25T14:51:26Z")

</div>

Browsers automatically collapse consecutive spaces, by design. Try using the Markdown component, and possibly wrapping your whitespace in backtick/graves:

```auto
text` `padded

```

---

<div class="post-metadata">

**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\
**Post date:** [August 26, 2020, 2:52pm UTC](https://forum.inductiveautomation.com/t/fill-label-space-with-dots/23440/11 "2020-08-26T14:52:34Z")

</div>

Use the whiteSpace under Alignment. Set it to pre.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/6/761334936760eddc452d39c1cce0e6b212c08252.png)