Brake line inside horizontal-stack with custom: button-cards

Configuration Frontend
1

Hey!

I have a horizontal stack card with multiple custom button cards. There is a condition in these cards that shows/hides the status. When the status is shown, the card becomes wider, and as a result, the mobile app has a horizontal scroll. Is there any way or card type where I can paste a set of custom button cards, and depending on their width, the line between them will break to avoid horizontal scrolling?

IMG_3983
IMG_39831290×751 105 KB

2

The only way is using card-mod to customize a behaviour of a flex container.
As a starting point:

type: custom:mod-card
card_mod:
  style:
    hui-horizontal-stack-card $: |
      div#root {
        flex-wrap: wrap;
        /* justify-content: ???? */
      }
      div#root > * > :first-child {
        min-width: 50px;
        max-width: 50px;
      }
card:
  type: horizontal-stack
  cards:
    - &ref_card
      type: button
      entity: sun.sun
    - *ref_card
    - *ref_card
    - *ref_card
    - *ref_card
    - *ref_card
    - *ref_card
    - *ref_card
    - *ref_card
    - *ref_card
    - *ref_card
    - *ref_card
    - *ref_card
    - *ref_card
    - *ref_card
    - *ref_card
    - *ref_card
    - *ref_card

изображение

And play with “justify-content” property to get a more desired look.

1 Like
3

Thanks a lot! That’s exactly what I need!