Lovelace: Button card

Just a quicky, is it possible to specify different actions (eg tap_action) for custom_fields?

In an effort to minimise custom cards and to keep maximum control over my designs, I have basically recreated the multiple-entity-row card using button-card, so have 2 different entities show in one button-card, and I would like to show the relevant more-info for each entity ?

image

If an entity name is too long for the button, is it possible to break the text in a new line?

I tried css attributes overflow-wrap, line-break and word-break but nothing worked.

Hm, I actually had this problem too. What I currently do now is put the first line in name and the second line in label. This way it does do a bit what you want, though you won’t be able to use the same label for something else this way.

Try this:

if (states['switch.fibaro_system_fgwpef_wall_plug_gen5_switch'].state
            =='on') return 'green'; return 'grey';

Yes it is possible if the embedded card supports tap_action or whatever else

Should be possible, try with those styles:

- white-space: initial
- text-overflow: initial
- overflow: initial
3 Likes

This works very nice! Thank you.

Check this post @jimz011: Lovelace: Button card

1 Like

Hello. Did you find any solution for dynamic color change?

It’s [[[...]]] for templates, not ${...} @Jay_Heavner

Could anyone give me some guidance on how to add custom button card in a conditional card?
The custom button card should be reflected in the listed entities based on the selection.

title: Room Selection/Schedule
type: vertical-stack
cards:
  - entities:
      - entity: input_select.rooms
      - entity: sun.sun
    show_header_toggle: false
    type: entities
  - card:
      entities:
        - switch.bedroom1
        - switch.bedroom2
        - switch.bedroom3
        - switch.bedroom6
        - switch.bedroom7
        - input_select.bedroom
      type: entities
    conditions:
      - entity: input_select.rooms
        state: Bedroom
    type: conditional

This should work:

title: Room Selection/Schedule
type: vertical-stack
cards:
  - entities:
      - entity: input_select.rooms
      - entity: sun.sun
    show_header_toggle: false
    type: entities
  - card:
      entities:
        - type: custom:hui-vertical-stack-card
          cards:
            - type: custom:button-card
              entity: switch.bedroom1
            - type: custom:button-card
              entity: switch.bedroom2
            - type: custom:button-card
              entity: switch.bedroom3
      type: entities
    conditions:
      - entity: input_select.rooms
        state: Bedroom
    type: conditional

Thanks sti0

Much appreciated. Does work like a charm.

Thanks for the assistance

I have one more question:

If I want to have the horizontal stack duplicated.
I can add additional horizontal stacks but it adds is into the same frame of the first stack Meaning it just adds more buttons below the first row.

I want a second custom card so I can kind of separate the two custom cards by their frame.

  - card:
      entities:
        - type: 'custom:hui-horizontal-stack-card'
          cards:
            - type: 'custom:button-card'
              entity: switch.bedroom1
            - type: 'custom:button-card'
              entity: switch.bedroom2
            - type: 'custom:button-card'
              entity: switch.bedroom3
      type: entities
title: Room Selection/Schedule
type: vertical-stack
cards:
  - entities:
      - entity: input_select.rooms
      - entity: sun.sun
    show_header_toggle: false
    type: entities
  - card:
      entities:
        - type: 'custom:hui-horizontal-stack-card'
          cards:
            - type: 'custom:button-card'
              entity: switch.bedroom1
            - type: 'custom:button-card'
              entity: switch.bedroom2
            - type: 'custom:button-card'
              entity: switch.bedroom3
      type: entities
    conditions:
      - entity: input_select.rooms
        state: Bedroom
    type: conditional

example

Sorry I’m not sure what you like to achieve. You can add a vertical stack and wrap the horizontal stacks within. If this is not what you want to do please describe more precise.

title: Room Selection/Schedule
type: vertical-stack
cards:
  - entities:
      - entity: input_select.rooms
      - entity: sun.sun
    show_header_toggle: false
    type: entities
  - card:
      entities:
        - type: custom:hui-vertical-stack-card
          cards:
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  entity: switch.bedroom1
                - type: 'custom:button-card'
                  entity: switch.bedroom2
                - type: 'custom:button-card'
                  entity: switch.bedroom3
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  entity: switch.bedroom1
                - type: 'custom:button-card'
                  entity: switch.bedroom2
                - type: 'custom:button-card'
                  entity: switch.bedroom3
      type: entities
    conditions:
      - entity: input_select.rooms
        state: Bedroom
    type: conditional

i can do this:
example1

but trying to achieve this:
example

Ok. Just do this:

title: Room Selection/Schedule
type: vertical-stack
cards:
  - entities:
      - entity: input_select.rooms
      - entity: sun.sun
    show_header_toggle: false
    type: entities
  - card:
      entities:
        - type: 'custom:hui-horizontal-stack-card'
          cards:
            - type: 'custom:button-card'
              entity: switch.bedroom1
            - type: 'custom:button-card'
              entity: switch.bedroom2
            - type: 'custom:button-card'
              entity: switch.bedroom3
      type: entities
    conditions:
      - entity: input_select.rooms
        state: Bedroom
    type: conditional
  - card:
      entities:
        - type: 'custom:hui-horizontal-stack-card'
          cards:
            - type: 'custom:button-card'
              entity: switch.bedroom1
            - type: 'custom:button-card'
              entity: switch.bedroom2
            - type: 'custom:button-card'
              entity: switch.bedroom3
      type: entities
    conditions:
      - entity: input_select.rooms
        state: Bedroom
    type: conditional

Tried that but the gives the same result without the gap/ new frame

Please try the updated version. I changed it after I posted the solution you mentioned lately.

What you did is different from what @sti0 showed you. He proposed 2 conditional cards, 1 for each line, you have only one :wink:

Thanks sti0 for the help.

I see where i went wrong. I duplicated everything except for:

    conditions:
      - entity: input_select.rooms
        state: Bedroom
    type: conditional

My thinking was that the conditional section would apply to both cards. I see the logic now it is basically another conditional card.

Thanks for your help. You guys rock.

Ah there is no embedded card, just me displaying a state in a custom field. I think I may have a solution, tap for one, and double tap or hold for the other - will give it a whirl later.