How can I add spaces (indent) to entity name

Share your Projects! Dashboards & Frontend
1

Hi
In the below screen shot i want to indent the on time and off time with a few spaces or tab. How can I do this ?

card-config
card-config826×1037 49.1 KB

If I add spaces to the Name they are stripped when displayed.

- entity: input_date.hotwater_on
  name: '          - On time'
- entity: input_date.hotwater_off
  name: '          Off time'

Thanks

2

You could use card-mod to right justify the labels.

3

A slightly different angle, but perhaps you like this. It seems to me it might fit your use case.

4

Hi Tom, I have tied to align using card-mod, but can only get it to work for the whole entites card, not for individual enities…

So the below will work for everything.

  - type: entities
    card_mod:
      style: |
        ha-card {
          color: white;
          text-align:right;
          font-size: 22px;
        }
    entities:
      - entity: sensor.hotwater_status
        name: Status
        icon: mdi:thermostat
      - entity: sensor.hotwater_switch_state
        icon: mdi:alert-octagon
        name: Hotwater Switch
      - entity: input_boolean.hotwater_timer
        name: Hotwater Timer
      - entity: input_datetime.hotwater_on
        name: '-    On time'
      - entity: input_datetime.hotwater_off
        name: '      > Off time'
      - entity: input_boolean.hotwater_solar
        name: Solar Above
      - entity: input_number.hotwater_kilowatts
      - entity: sensor.energy_solar_power_now
        name: Solar Power Now

But the below doesn’t work for an individual entity

  - entity: input_datetime.hotwater_on
    card_mod:
      style: |
        ha-card {
          color: red;
          text-align:right;
          font-size: 22px;
        }
    name: '-    On time'

Do you know how I can make it work for an individual entity ?

EDIT:

Found out how to do it, kind off ok, - after alot of dicking around…

  - entity: input_datetime.hotwater_on
    card_mod:
      style: |
        hui-generic-entity-row {
          color: white;
          padding-left 52px; 
          font-size: 22px;
        }
    name: '-    On time'

Do you how pad just the text and not the icon too ?

5

I did look at the fold-entity card, but it pads the icon also…

6

You cloud ask in the card-mod topic.