How to maintain a constant margin between the cards within stack-in card

Configuration Frontend
1

Hi,

I am looking for a way to dynamically align my stacked cards (using custom stack-in card) so that there is always a constant margin between the cards.

system info:

image
image571×131 7.92 KB

The context
I want to recreate a card similar to this button card with subbuttons.(dont mind the colors please). I base myself mainly on mushroom cards within a custom:stack-in card (button card is too limited with templating etc…).

Example I want to recreate:
example card

The issue

Everything worked out quite nicely, howevever I dont seem to be able to align the ‘subbuttons’ when using the custom:stack-in card. I have the feeling this needs to be done with advanced CSS using e.g. flex-grow in the right container but I don’t seem to be able to get there.

Below is as far as I got (basically using card-mod with fixed positioning as this overrides the 3 equal columns generated by the stack-in card. Obviously the moment the values change the mushroom cards will adjust their size and the margin between them will also change, which is what I want to avoid (dont mind the colors and icons etc, this is something I can work out). the issue is with the two ‘subbuttons’ on the right (or more if I want to add more).

work in progress card

type: custom:stack-in-card
mode: horizontal
card_mod:
  style:
    .: |
      ha-card {
        border-radius: 40px !important;
        height:58px
      }
cards:
  - type: custom:mushroom-template-card
    primary: Lichten
    icon: mdi:ceiling-light-multiple
    fill_container: true
    multiline_secondary: true
    entity: group.all_light_entities
    tap_action:
      action: navigate
      navigation_path: /vermeulenhome-nieuw/lichten
    layout: horizontal
    card_mod:
      style:
        mushroom-state-info$: |
          .container {
            flex-direction: row !important;
            justify-content: space-between;
            align-items: center;
          }
  - type: custom:mushroom-template-card
    icon: mdi:lightning-bolt
    entity: group.all_light_entities
    primary: >-
      {{expand('group.all_light_entities')|selectattr('state','eq','on')|map(attribute='entity_id')|list|count}}
      lichten aan
    icon_color: >
      {% if
      expand('group.all_light_entities')|selectattr('state','eq','on')|map(attribute='entity_id')|list|count
      == 0 %}

      {% else %}
        #ebcb8b
      {% endif %}
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none !important;
            --icon-symbol-size: 16px;
            --icon-size: 12px;
            padding-right: 0px;
            padding-left: 0px;
            padding-bottom: 0px;
            padding-top: 0px;

          }
        mushroom-state-info$: |
          .container {
            --card-secondary-font-size: 10px;
            --card-primary-font-size: 11px;
          }
        .: |
          ha-card {
            position: absolute;
            right: 10px;
            top: 10px;
            /*z-index: 0;*/
            /* background-color: #002f7a !important;*/
            background-color: rgba(235, 203, 139,0.3) !important;
            border-radius: 30px !important;
            height: 38px !important;
          }
  - type: custom:mushroom-template-card
    icon: mdi:lightning-bolt
    entity: group.all_light_entities
    primary: "{{ states(\"sensor.wattage_alle_lichten_power\")}} Watt"
    icon_color: >
      {% if
      expand('group.all_light_entities')|selectattr('state','eq','on')|map(attribute='entity_id')|list|count
      == 0 %}

      {% else %}
        #ebcb8b
      {% endif %}
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none !important;
            --icon-symbol-size: 16px;
            --icon-size: 12px;
            padding-right: 0px;
            padding-left: 0px;
            padding-bottom: 0px;
            padding-top: 0px;

          }
        mushroom-state-info$: |
          .container {
            --card-secondary-font-size: 10px;
            --card-primary-font-size: 11px;
          }
        .: |
          ha-card {
            position: absolute;
            right: 127px;
            top: 10px;
            /*z-index: 0;*/
            /* comment */
            /* background-color: #002f7a !important;*/
            background-color: rgba(235, 203, 139,0.3) !important;
            border-radius: 30px !important;
            height: 38px !important;

Thanks for reading and sharing any tips/advice/solutions you might have!

Kind regards,

Ben

2

Check out custom:layout-card using grid mode

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 1fr 1fr 1fr
  margin: 0px 0px 0px 0px

or you can define the columns using percentages

 grid-template-columns: 50% 50%
3

Thanks for replying. Your proposal would also create fixed width columns, correct? I am actually looking for a way where the margin between the two subbuttons remains the same, regardless of their content (which resizes the cards that are behind it).

Would there be a way for custom:layout-card to dynamically give the width to the columns, depending on and matching their content (in my case a mushroom card)?

Obviously i am also open to other solutions, for example something with a flex container, but I am completely out of my water for this one…

Thanks again!

Ben

4

Something like this?

image
image868×252 8.04 KB

There are multiple ways to achieve your goal. Stated info, icon size, card width, dashboard type and layout do come into play.

We can work through those though.

5

The built it heading card will get pretty close to what you want without much hassle.

6

Thanks Kyle, would work indeed somewhat, but I read no templating with the heading card unfortunately…

7

Happy to read there are a number of possibilities; any advice based on the code for my example card?

Please bear in mind I do want to mimick the bubble card and it’s subbuttons (my first picture in my post, I erronously referred to button card, but that was a bubble card). Again the cards (or there containers/columns/… ) do have to scale based on their values.

8

Following up on my own post,

After some reseach I stumbled on this post, detailing a combination of a flex container and the usage of margins which is probably what I need.

Using auto margins for main axis alignment

however, I do not know how to use a flex container with either custom-layout-card or stack-in card. I did come across some posts here on the forum using custom-mod-card, wrapping a horizontal layout card. however, when I try using that, I cannot for the life of me target the individual items in the container. Targeting the first ‘child’ targets all of the cards (see code below and a screenshot of the resulting card)

type: custom:mod-card
style:
  hui-horizontal-stack-card$: |
    div#root {
    display:flex;
    flex-directon:row;
    
    }
    div#root > * :first-child {
    /*margin-left:auto;*/
    border: 2px solid orange;
    }
card:
  type: horizontal-stack
  cards:
    - type: custom:mushroom-template-card
      primary: Lichten
      icon: mdi:ceiling-light-multiple
      fill_container: true
      multiline_secondary: true
      entity: group.all_light_entities
      tap_action:
        action: navigate
        navigation_path: /vermeulenhome-nieuw/lichten
      layout: horizontal
    - type: custom:mushroom-template-card
      icon: mdi:lightning-bolt
      entity: group.all_light_entities
      primary: >-
        {{expand('group.all_light_entities')|selectattr('state','eq','on')|map(attribute='entity_id')|list|count}}
        lichten aan
      icon_color: >
        {% if
        expand('group.all_light_entities')|selectattr('state','eq','on')|map(attribute='entity_id')|list|count
        == 0 %}

        {% else %}
          #ebcb8b
        {% endif %}
      card_mod:
        style:
          mushroom-shape-icon$: |
            .shape {
              --shape-color: none !important;
              --icon-symbol-size: 16px;
              --icon-size: 12px;
              padding-right: 0px;
              padding-left: 0px;
              padding-bottom: 0px;
              padding-top: 0px;

            }
          mushroom-state-info$: |
            .container {
              --card-secondary-font-size: 10px;
              --card-primary-font-size: 11px;
            }
          .: |
            ha-card {
              position: absolute;
              /* right: 110px;*/
              top: 10px;
              /*z-index: 0;*/
              /* background-color: #002f7a !important;*/
              background-color: rgba(235, 203, 139,0.3) !important;
              border-radius: 30px !important;
              height: 38px !important;
            }
    - type: custom:mushroom-template-card
      icon: mdi:lightning-bolt
      entity: group.all_light_entities
      primary: "{{ states(\"sensor.wattage_alle_lichten_power\")}} Watt"
      icon_color: >
        {% if
        expand('group.all_light_entities')|selectattr('state','eq','on')|map(attribute='entity_id')|list|count
        == 0 %}

        {% else %}
          #ebcb8b
        {% endif %}
      card_mod:
        style:
          mushroom-shape-icon$: |
            .shape {
              --shape-color: none !important;
              --icon-symbol-size: 16px;
              --icon-size: 12px;
              padding-right: 0px;
              padding-left: 0px;
              padding-bottom: 0px;
              padding-top: 0px;

            }
          mushroom-state-info$: |
            .container {
              --card-secondary-font-size: 10px;
              --card-primary-font-size: 11px;
            }
          .: |
            ha-card {
              position: absolute;
              margin-left: auto;
              /* right: 110px;*/
              top: 10px;
              /*z-index: 0;*/
              /* comment */
              /* background-color: #002f7a !important;*/
              background-color: rgba(235, 203, 139,0.3) !important;
              border-radius: 30px !important;
              height: 38px !important;

image

I feel like i’m stuck here, hoping someone can help out getting this flexbox with automargin implemented on any of the cards (custom-layout-card, custom-stack-in-card, custom-mod-card with horizontal stack, etc).

Thank you for reading!
Ben

9

Follow-up - I went the route of leas resistance with the bubble-card route. I’ll take on the shizzle of JS templating with it…

cheers,
Ben