Possible to evenly space multiple buttons to each other?

[alexrmay91]

I have a few few buttons of varying widths, so they don't appear centered overall.

Here's an example of a card along with the same card broken into a horizontal stack. You can see the plain paper-buttons card isn't evenly spaced/centered. Downsides of using a horizontal stack are the borders as well as the fact that base_config can't be used.

Let me know if I'm missing a way to do this, but some sort of "button spacing" option would be great to have.

Here's the config for the top card:

type: entities
entities:
  - type: custom:paper-buttons-row
    base_config:
      style:
        name:
          color: white
          font-size: 16px
        state:
          font-size: 10px
    buttons:
      - entity: binary_sensor.bedroom_door_contact
        layout: name_icon_state
        name: Bedroom Door
        state_icons:
          'off': mdi:door
          'on': mdi:door-open
        state_text:
          'off': Closed
          'on': Open
      - entity: binary_sensor.garage_door_contact
        layout: name_icon_state
        name: Garage Door
        state_icons:
          'off': mdi:garage-variant
          'on': mdi:garage-open-variant
        state_text:
          'off': Closed
          'on': Open
      - entity: input_boolean.bedroom_occupied
        layout: name_icon_state
        name: Bedroom
        tap_action:
          action: more-info
        state_icons:
          'off': mdi:account-outline
          'on': mdi:account-alert
        state_text:
          'off': Empty
          'on': Occupied

[jcwillox]

Good question, so the best way to do this is by using width: 100% and margin, basically, you set each button to have a width of 100% and then use margins to control the spacing between them. Here's an example

type: entities
title: Internet
state_color: true
entities:
  - type: custom:paper-buttons-row
    base_config:
      style:
        button:
          margin-bottom: 8px
          margin-left: 4px
          margin-right: 4px
          width: 100%

          # other aesthetic styling options
          background-color: var(--table-row-background-color)
          border: 1px solid
          border-color: '#FFFFFF'
          border-radius: 4px
          justify-content: center
    buttons:
      - icon: mdi:router-wireless
        name: ROUTER
        tap_action:
          action: call-service
          service: shell_command.reboot_router
      - icon: mdi:lan
        name: WAN
        tap_action:
          action: call-service
          service: shell_command.restart_wan
      - icon: mdi:wifi
        name: WLAN
        tap_action:
          action: call-service
          service: shell_command.restart_wlan

[Mithrox]

I have a follow-up question around this topic. I have a "box" with 21 paper buttons, where I have 3 on each row. When I did set this up, I defined style and state_style on each single button, and it's a pita to change. So this is a great way of doing it much easier. However, I have one issue now when I did it on top. This is my code (for some reason, when I use insert code with the option, it just shows as a table, so this was the easiest way to show it with formatting):

It now shows the buttons correctly and evenly spaced, and it takes the "global" config when it comes to spacing, radius etc. However, I did have a state_styles to keep the name white instead of the normal blue, and no matter how I add it to the base_config, it does not seem to stick. It's not in the code over as I couldn't get it to work, but the second row here is how I would like to have it look, while the first row is how it does look when it's not defined in base_config anywhere.

Now the last question is this, I use as vertical stack and then putting 21 paper buttons in it, and it means for every 3rd button, I have to defined a new -type: custom:paper-buttons-row. When I do, the base_config just works for the first (which makes sense). Is there a way to make this easier, or is there a way to drop vertical stack and do several lines of paper-buttons instead?

Sorry if this should be obvious, it's a learning process :)

[Mithrox]

Sorry for being the stupid person here, but are you referring to the bottom example, this one?

If so, I am struggling a bit to understand the structure of the how to add the buttons for second/third etc row.

And about the tap_action and hold_action, that would be awesome as expecially hold action is more_info for everyone. Can I just basically add the hold_action: and then the action: below it under base_config?

[jcwillox]

All good, so the - - is how you declare a nested list in YAML, so its a list of lists, the outer list is the list of rows, and each row has a list of columns so to you can add an extra row or column like this.

type: entities
entities:
  - type: "custom:paper-buttons-row"
    buttons:
      # row 1
      - - entity: light.bedroom_underglow  # column 1
        - entity: light.bedroom_underglow  # column 2
          name: Light
          icon: mdi:lightbulb
        - entity: light.bedroom_underglow  # column 3

      # row 2
      - - entity: light.bedroom_light  # column 1
        - entity: light.bedroom_underglow  # column 2
          icon: "mdi:lightbulb"  # column 3

      # row 3
      - - entity: light.bedroom_underglow  # column 1
        - entity: light.bedroom_underglow  # column 2
        - entity: light.bedroom_underglow  # column 3

Hopefully, that's a bit clearer, let me know how it goes.

And about the tap_action and hold_action, that would be awesome as expecially hold action is more_info for everyone. Can I just basically add the hold_action: and then the action: below it under base_config?

Yes, exactly

base_config:
  styles:
    # ...
  tap_action:
    action: call-service
    service: light.toggle
  hold_action:
    action: more-info
buttons:
  entity: light.light
  tap_action:
    service_data:
      entity_id: light.light

[Mithrox]

Yes, I think that made it a bit clearer for the row setup, I will test it out and I think I'll get it working properly.

For the base_config, will it be so that if I have the tap_action / action: call-service / service: light.toggle in the base_config, but at some of the lights I need to use switch.toggle instead of light. toggle, can I just override it by putting the full config under that specific entity?

And I have to ask again, how on earth do I format things like code here? 😄 I have tried the <> code option above, but it just ends up like an indented table, and not looking like your great looking code at all.

I still do wonder about the state_styles though, if I put it on each button like this, it works:

However, if I put it in the base_config like this, it doesn't seem to work. Is there a glaring error there somewhere?

[Mithrox]

I seem to have resolved the White text, I played around a bit with it, and it now seems to be correct. So that's one issue less 😄

[Mithrox]

Saved a lot of space doing it like this compared to the slider buttons I used before, more-info for dimming and just off and on with the buttons :)