Positioning elements on picture-elements card

Configuration
1

I’m just discovering (thanks partly to @j4Media - Picture Elements & Custom Layout Card Interface) how good picture-elements can be for creating a panel interface. But I’m having a couple of small problems.

I know you can use

style:
  top: 65%
  left: 60%

But this seems to position the centre of the element.

Is there any way to position it to the left (or right)?

Also, is there a way to wrap the content of an element e.g. a state-label if the contents is too wide?

2

Nope.

3

:slight_smile:
image

1 Like
4

OK, I’m not a CSS expert (not even close) but I might have found a workaround.

If you put whatever you want to position in a markdown-card I think this works.

              - type: custom:hui-markdown-card
                content: |
                  {{ states('sensor.or-whatever-you-need-here')}}
                style:
                  top: 90%
                  left: 30%
                  width: 35%
                  text-align: left

I believe width defines the size of the element in relation to the object it is in.

This also wraps text.