Lovelace Picture-Elements State-Label Alignment

Configuration Frontend
1

Can someone show me how to align text in the Lovelace picture-elements state-label card?
I have multiple rows and the text is being centered in this column
‘’’ LR
’ BR1
’ HALL

what I want is
LR
BR1
HALL
I’ve used the text-align: left & left; but neither makes a difference, it always seems to center.

 - type: state-label
   entity: input_text.lr
   style:
      top: 22%
      left: 15%
      font-size: 100%
      text-align: left;
2 Likes
2

I’m trying to figure this out as well. Haven’t found a solution yet.

3

I got what I needed by using px instead of % and manually aligning. I had 7 lines to do and it was a pain but that’s the only solution I could find.

4

This still center justifies the label. Hopefully a solution gets added soon!

5

Yes this is true but by changing to pixels I then started with a different value on each line thus giving the appearance of left justification.

It certainly isn’t a fix but now all my columns are aligned.

6

Hi,

I know this will be unique to your card, but do you think you could share a sample of how you did it?

Thanks very much

7

Does this help?
The value of input_text.lr is LR, br1 is Bedroom1

                  - type: state-label      
                    entity: input_text.lr
                    style:
                      top: 20%
                      left: '21px'
                      font-size: 100%
                      font-weight: 700

                  - type: state-label
                    entity: input_text.br1
                    style:
                      top: 30%
                      left: '45px'
                      font-size: 100%
                      font-weight: 700
1 Like
8

Brilliant thanks!

9

Apologies for resurrecting an old thread, but I’ve found a solution that seems to work (thanks to villhelm and ludeeus in the HA dischord). Thought I’d post for anyone else having issues; the answer is Transform: none

elements:
  - entity: sensor.rubbish
    style:
      left: 2%
      top: 5%
      transform: none
    prefix: 'Rubbish & recycling go out '
    type: state-label
  - entity: sensor.food_waste
    style:
      left: 2%
      top: 20%
      transform: none
    prefix: 'Food waste goes out '
    type: state-label
image: /local/recycling-half.jpg
type: picture-elements
11 Likes
10

Thanx,
This just made my day !!!

11

Thank you!! works perfect

12

I’ve discovered these by searching the forum or trial and error. Is there anything else I should know that could help?

  • if I use state-label or the custom:text-element, everything is aligned on the center of the object

  • transform: none
    aligns objects by their upper left corner

  • max-width: 1px
    aligns objects by their left edge

  • left: 20px
    I can also align by pixels

And the last tip that is saving my sanity is using Chrome’s Developer Tools to interactively adjust values until things look right, then copying them over to my yaml files.

1 Like
13

Exactly what I needed, thanks a lot, they key to that is overriding the tranform(50,50) with none.
Just updated the documentation for the next one running into this

1 Like