Picture-elements card: state-label formatting

Configuration Frontend
1

Hello,
is there a way to format the state-labels, so everything is aligned? This is part of my picture-elements card:

image

And i would like it to look this way:

SolvisBen    : Home
HKR1         : Auto
HKR2         : Auto
Gas          : 3311,9 m³ (0.1 m³/h)

The current code is not very interesting, just the default:

  - type: state-label
    entity: device_tracker.solvisben
    prefix: 'SolvisBen: '
    style:
      top: 26%
      left: 24%
      transform: none
  - type: state-label
    entity: sensor.solvis_hkr1_modus
    prefix: 'HKR1: '
    style:
      top: 29%
      left: 24%
      transform: none
  - type: state-label
    entity: sensor.solvis_hkr2_modus
    prefix: 'HKR2: '
    style:
      top: 32%
      left: 24%
      transform: none
  - type: state-label
    entity: sensor.gaszaehler_value
    prefix: 'Gas: '
    style:
      top: 35%
      left: 24%
      transform: none
  - type: state-label
    entity: sensor.gaszaehler_rate_per_digitalization_round
    prefix: (
    suffix: /h)
    style:
      top: 35%
      left: 45%
      transform: none

Thank you for hints,
Philipp

2

I’m not seeing any solution like that.
Maybe remove the Prefix, just keep the ': ’ and do it in two passes.

First, the values

  - type: state-label
    entity: device_tracker.solvisben
    prefix: ': '
    style:
      top: 26%
      left: 27%
      transform: none
  - type: state-label
    entity: sensor.solvis_hkr1_modus
    prefix: ': '
    style:
      top: 29%
      left: 27%
      transform: none
  - type: state-label
    entity: sensor.solvis_hkr2_modus
    prefix: ': '
    style:
      top: 32%
      left: 27%
      transform: none
  - type: state-label
    entity: sensor.gaszaehler_value
    prefix: ': '
    style:
      top: 35%
      left: 27%
      transform: none
  - type: state-label
    entity: sensor.gaszaehler_rate_per_digitalization_round
    prefix: (
    suffix: /h)
    style:
      top: 35%
      left: 48%
      transform: none

Then the labels
But you’ll need a blank sensor, have a look at this topic to create a blank sensor
then you can do:

  - type: state-label
    entity: sensor.blank_blank
    prefix: 'SolvisBen'
    style:
      top: 26%
      left: 24%
      transform: none
  - type: state-label
    entity: sensor.blank_blank
    prefix: 'HKR1'
    style:
      top: 29%
      left: 24%
      transform: none
  - type: state-label
    entity: sensor.blank_blank
    prefix: 'HKR2'
    style:
      top: 32%
      left: 24%
      transform: none
  - type: state-label
    entity: sensor.blank_blank
    prefix: 'Gas'
    style:
      top: 35%
      left: 24%
      transform: none

EDIT: You’ll have to play arround with the percentages. Did you know that you can put decimal values? Like 44.25637%. I didn’t until recently, that’s always good to know, right?

3

Thank you, works very well with this workaround!

image