Center Lovelace Entities Buttons

Configuration
1

Just updated to latest version 2021.12.1
I notice that my Entities card with a single button which has always been centered is now aligned to the left. How can i get this back to centre please?

image

  - type: entities
    entities:
      - entity: input_number.boost_duration
      - type: buttons
        entities:
          - entity: script.heating_boost
            icon: mdi:fire
            show_name: true
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.heating_boost
2

image

3

Thank you, will keep that in mind. Don’t really want another bespoke configuration just to get a single button back in the center where it always has been.

But should I add more buttons like this and want same behaviour I will certainly go this route. Appreciate the help.

1 Like
4

@Ildar_Gabdullin hi!

Could you please help me with a very simple but generic horizontally centered chips solution?

I added the following card_mod definition to my entities card, but made no changes, I think because the incorrect selector/path…

type: entities
show_header_toggle: false
state_color: true
entities: 
  - type: buttons
...
  - type: buttons
...
  - type: buttons
...
  - type: buttons
...
card_mod:
  style: |
    .ha-scrollbar {
      justify-content: center;
    }

…could you please drive me to the right direction (without explicitly referring to each other in each ‘buttons row’? I mean, without &xyz > *xyz…)?

Thanks a lot in advance,

5

Hi. I am a bit far away a usual PC, will try to give you an advice within these few days.

1 Like
6 
type: entities
title: distribution for all rows
entities:
  - &ref_buttons
    type: buttons
    entities:
      - &ref_button
        entity: sun.sun
        show_name: true
        show_icon: true
      - *ref_button
      - *ref_button
      - *ref_button
  - *ref_buttons
  - *ref_buttons
card_mod:
  style:
    hui-buttons-row:
      $ hui-buttons-base $: |
        .ha-scrollbar {
          justify-content: center;
        }

|изображение

1 Like
7

Thanks for your time!

For first sight I thought not really this was I asked for, as I would like to use some generic method without any explicit &ref, *ref references, but interestingly your solution works without them, like…

type: entities
show_header_toggle: false
state_color: true
card_mod:
  style:
    hui-buttons-row:
      $ hui-buttons-base $: |
        .ha-scrollbar {
          justify-content: center;
        }
entities:
  - type: buttons
    entities:
      - entity: light.bathroom_shelf
        name: Bathroom shelf

…so lot of thanks for it!

Honestly I simply do not understand the syntax, so why we have to catch the hui-buttons-row as topmost element, and what the two $ before and after the hui-buttons-base mean, but maybe someday I will get it.

Thanks again!

8

Use Code Inspector to determine a correct path.
These &ref are yaml anchors: there are plenty of same buttons and same rows, these anchors are to reduce a code.

1 Like
9

Just for the report, now it seems that I can understand those shadow-root elements and the working method of the card-mod injections also. Sadly - if I’m right - it not makes overrides just extensions, so if there is already explicit CSS definitions we can not override them, but we can search for any creative way to extend them with our requirements. I’m not a sitebuild wizard so just tried to scratch the very top of these things, and I wrote what I wrote as I had a hard fight with the already available margin-left definition on the ha-chips in entities card, buttons row, without texts, where the icon is not perfectly horizontally centered, but at the end with a very ugly explicit left definition I could play out it.

image
image1014×400 10.8 KB

Thanks for your help, I simply just slipped over it when I searched for it.

As I wrote I could also avoid of the usage of &ref/*ref references. With proper path definition I could catch the required elements of multiple objects.

Thanks again!