Stack-In-Card: Drop-in replacement for vertical-stack-in-card

[RonM (Ron Meijsen)]

Hi I want to use a custom:button-card within the stack-in-card

But it only shows the title, when I use a regular button card it shows the button

Also the code also works whan I use vertical-stack instead of stack-in-card

This is my code

type: custom:stack-in-card
mode: vertical
title: Test
cards:

• type: custom:button-card
  entity: input_boolean.input_boolean_fan
  name: ’ ’
  styles:
  card:
  - height: 60px
  state:

  • value: ‘on’
    color: lightgreen
    styles:
    icon:
    - animation: |
    [[[

         if (states['sensor.afzuiging_temperatuur'].state == '10') return "rotating 3s linear infinite"; 
         if (states['sensor.afzuiging_temperatuur'].state == '50') return "rotating 1s linear infinite"; 
         if (states['sensor.afzuiging_temperatuur'].state == '100') return "rotating 0.5s linear infinite"; 
    
        ]]]
    

  tap_action:
  action: none
  double_tap_action:
  action: more-info
  entity: sensor.afzuiging_temperatuur
• type: horizontal-stack
  cards:
  • type: custom:button-card
    color_type: black-card
    color: lightgreen
    icon: mdi:fan-speed-1
    styles:
    card:
    - height: 40px
    tap_action:
    action: call-service
    service: climate.set_temperature
    service_data:
    entity_id: climate.afzuiging
    temperature: 10
  • type: custom:button-card
    color_type: black-card
    color: lightgreen
    icon: mdi:fan-speed-2
    styles:
    card:
    - height: 40px
    tap_action:
    action: call-service
    service: climate.set_temperature
    service_data:
    entity_id: climate.afzuiging
    temperature: 50
  • type: custom:button-card
    color_type: black-card
    color: lightgreen
    icon: mdi:fan-speed-3
    styles:
    card:
    - height: 40px
    tap_action:
    action: call-service
    service: climate.set_temperature
    service_data:
    entity_id: climate.afzuiging
    temperature: 100

what am I doing wrong

This is how it looks with vertical-stack

Thanks
Ron

[sparkydave (🇦🇺 Dave)]

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

[RonM (Ron Meijsen)]

hi Dave,
Is your message about my question? I am not asking for a helpdesk service. My question was that custom:button-card not seems to work with stack-in-card, i just tried to be complete by giving the code.

if it should work just tell me and I will try to find out why it does not work further.

Ron

[sparkydave (🇦🇺 Dave)]

The issue is that you didn’t format your code properly. Follow the link I posted to find out how to do it.

[casper.mostert]

Hi,

My first time posting on the forum, so please excuse me if I do something wrong.
I looked at every single post I could find and tried all sorts of combinations before posting on the forum.

I’ve stacked 5 custom buttons in a horizontal row by using the stack-in-card and the custom button card. Everything is working as expected and showing correctly.

The next step is to try and reduce the Title font size to 18px by using card-mod.
I’ve used card-mod on entity cards without any issues and I was able to reduce the font-size on these cards by using the card-header property.

As soon as I introcuce card-mod to my custom stack in card the custom buttons dissappear.
Image of the working code.

type: custom:stack-in-card
title: Underfloor Heating
mode: horizontal
keep:
  margin: true
  border_radius: true
cards:
  - type: custom:button-card
    color_type: card
    entity: switch.uh_ensuite
    name: Ensuite
    show_icon: false
    state:
      - value: 'on'
        color: orange
      - operator: default
    styles:
      card:
        - height: 80px
        - font-size: 14px
        - color: 212121
      name:
        - white-space: unset
  - type: custom:button-card
    color_type: card
    entity: switch.uh_hoofslaapkamer
    name: Main Bedroom
    show_icon: false
    state:
      - value: 'on'
        color: orange
      - operator: default
    styles:
      card:
        - height: 80px
        - font-size: 14px
        - color: 212121
      name:
        - white-space: unset
  - type: custom:button-card
    color_type: card
    entity: switch.uh_spaarkamer
    name: Spare Room
    show_icon: false
    state:
      - value: 'on'
        color: orange
      - operator: default
    styles:
      card:
        - height: 80px
        - font-size: 14px
        - color: 212121
      name:
        - white-space: unset
  - type: custom:button-card
    color_type: card
    entity: switch.uh_tv_kamer
    name: TV Room
    show_icon: false
    state:
      - value: 'on'
        color: orange
      - operator: default
    styles:
      card:
        - height: 80px
        - font-size: 14px
        - color: 212121
      name:
        - white-space: unset
  - type: custom:button-card
    color_type: card
    entity: switch.uh_zac_kamer
    name: Zac Room
    show_icon: false
    state:
      - value: 'on'
        color: orange
      - operator: default
    styles:
      card:
        - height: 80px
        - font-size: 14px
        - color: 212121
      name:
        - white-space: unset

Picture of custom mod-card with properties not working. Now this is probably due to my lack of knowledge, but according to me this should work. I’ve tried so many different options and can’t get this to work. If someone can please point me in the right direction.
(Tried to paste a screenshot but not allowed as a newbie.)

type: custom:mod-card
style:
  stack-in-card$: |
    .card-header {
      font-size: 18px;
    }  
card:
  type: custom:stack-in-card
  title: Underfloor Heating
  mode: horizontal
  keep:
    margin: true
    border_radius: true
  cards:
    - type: custom:button-card
      color_type: card
      entity: switch.uh_ensuite
      name: Ensuite
      show_icon: false
      state:
        - value: 'on'
          color: orange
        - operator: default
      styles:
        card:
          - height: 80px
          - font-size: 14px
          - color: 212121
        name:
          - white-space: unset
    - type: custom:button-card
      color_type: card
      entity: switch.uh_hoofslaapkamer
      name: Main Bedroom
      show_icon: false
      state:
        - value: 'on'
          color: orange
        - operator: default
      styles:
        card:
          - height: 80px
          - font-size: 14px
          - color: 212121
        name:
          - white-space: unset
    - type: custom:button-card
      color_type: card
      entity: switch.uh_spaarkamer
      name: Spare Room
      show_icon: false
      state:
        - value: 'on'
          color: orange
        - operator: default
      styles:
        card:
          - height: 80px
          - font-size: 14px
          - color: 212121
        name:
          - white-space: unset
    - type: custom:button-card
      color_type: card
      entity: switch.uh_tv_kamer
      name: TV Room
      show_icon: false
      state:
        - value: 'on'
          color: orange
        - operator: default
      styles:
        card:
          - height: 80px
          - font-size: 14px
          - color: 212121
        name:
          - white-space: unset
    - type: custom:button-card
      color_type: card
      entity: switch.uh_zac_kamer
      name: Zac Room
      show_icon: false
      state:
        - value: 'on'
          color: orange
        - operator: default
      styles:
        card:
          - height: 80px
          - font-size: 14px
          - color: 212121
        name:
          - white-space: unset

[Ildar_Gabdullin]

card-mod thread → 1st post → link at the bottom → styles for stack-in-card

[casper.mostert]

Thanks for the quick reply,

I worked through that thread and found the code I’m currently using. It is not working with stack-in-card.
If I change the stack in card to something else the card-mod code does work, so I don’t think it is a card-mod issue.

[Flicker20]

I’m having some issues getting my stack-in-card to not be a 50/50 split.
I have a mushroom template card and a mushroom chips card horizontally stacked - how can I do it so the card itself is more like an 80/20 split?

I want it to look like this:

But it looks like this when the screen size is smaller:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: Office
    secondary: |-
      {% if is_state('light.office_2', 'on') %}
       On
      {% elif is_state('light.office_2', 'off') %}
       Off
      {% endif %}
    icon: mdi:desktop-tower-monitor
    entity: light.office
    tap_action:
      action: navigate
      navigation_path: office
    hold_action:
      action: toggle
    icon_color: |-
      {% if is_state('light.office_2', 'on') %}
       orange
      {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: binary_sensor.office_cupboard_door_sensor_contact
        secondary: >-

          {% if is_state('binary_sensor.office_cupboard_door_sensor_contact',
          'off') %} Door Closed

          {% elif is_state('binary_sensor.office_cupboard_door_sensor_contact',
          'on') %} Door Open

          {% endif %}
        icon_color: '{{ ''yellow'' if is_state(entity, ''on'') else ''grey'' }}'
        icon: '{{ ''mdi:door-open'' if is_state(entity, ''on'') else ''mdi:door-closed'' }}'
        tap_action:
          action: none
        hold_action:
          action: none
        style: |
          ha-card {
            --chip-border-width: 0px;
    alignment: end
card_mod:
  style: |
    ha-card { 
      background-color: {{ '#fedb68' if is_state('light.office_2', 'on')}};

      --primary-text-color: {{ '#000000' if is_state('light.office_2', 'on')}};
      border-width: 0px;
      margin: 0px;
      }

Any ideas please?

[Vintage89]

I’m trying to remove the border radius on the top of the “Lys” card. Outside of Stack in card it works, but not inside?

type: custom:stack-in-card
background: false
cards:
  - type: custom:button-card
    name: Lys
    style: |
      ha-card { 
        background: var(--background-color-2) !important;
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
      }

[Mar1us]

I´m trying to get a sensor Date in the Title of the card but it doesn´t work

Example:
{{ states('sensor.wohnzimmer_raumthermostat_temperature') | round(1)}}

Any idea?

[NathanCu (Nathan Curtis)]

Considering stack in card is a direct drop in replacement for vertical stack and vertical stack does not support templates, I don’t think stack in card will either…

You’ll need to wrap it in another card to add template support like custom:card-tenplater

[aidanmc1998]

Does anyone know how to remove the 4px margin from around the stack in card? currently I am using a combination of stack in card & layout card to nest mushroom cards & custom buttons which is working perfectly, however when I then bring them into my normal cards the margin is causing them to not align. I have tried using card mod on the stack in card which doesn’t work (not unexpected). Any advice is appreciated.

Screenshot:

Stack-in card code:

cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 4fr 1fr
    cards:
      - type: custom:mushroom-light-card
        entity: light.aidans_lamp
        fill_container: true
        show_brightness_control: true
        show_color_control: false
        show_color_temp_control: false
        use_light_color: true
        collapsible_controls: false
        card_mod:
          style: |
            ha-card {
            background-color: {{ 'var(--ha-card-secondary-background)' if
            is_state('light.aidans_lamp', 'on') }};
            }
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                template:
                  - light_chip
                entity: light.aidans_lamp
                icon: mdi:lightbulb
                styles:
                  img_cell:
                    - background-color: rgba(255,237,222,0.2)
                  icon:
                    - color: rgba(255,237,222,1)
                  card:
                    - margin-top: 15px
                tap_action:
                  action: call-service
                  service: light.turn_on
                  target:
                    entity_id: light.aidans_lamp
                  data:
                    color_temp_kelvin: 5500
                hold_action:
                  action: none
                double_tap_action:
                  action: none
              - type: custom:button-card
                template:
                  - light_chip
                entity: light.aidans_lamp
                icon: mdi:lightbulb
                styles:
                  img_cell:
                    - background-color: rgba(255,177,109,0.2)
                  icon:
                    - color: rgba(255,177,109,1)
                  card:
                    - margin-top: 15px
                tap_action:
                  action: call-service
                  service: light.turn_on
                  target:
                    entity_id: light.aidans_lamp
                  data:
                    color_temp_kelvin: 3000
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                template:
                  - light_chip
                entity: light.aidans_lamp
                icon: mdi:lightbulb
                styles:
                  img_cell:
                    - background-color: rgba(0,224,255,0.2)
                  icon:
                    - color: rgba(0,224,255,1)
                tap_action:
                  action: call-service
                  service: light.turn_on
                  target:
                    entity_id: light.aidans_lamp
                  data:
                    rgb_color:
                      - 0
                      - 224
                      - 255
              - type: custom:button-card
                template:
                  - light_chip
                entity: light.aidans_lamp
                icon: mdi:lightbulb
                styles:
                  img_cell:
                    - background-color: rgba(255,12,218,0.2)
                  icon:
                    - color: rgba(255,12,218,1)
                tap_action:
                  action: call-service
                  service: light.turn_on
                  target:
                    entity_id: light.aidans_lamp
                  data:
                    rgb_color:
                      - 255
                      - 12
                      - 218

[aidanmc1998]

I guess I have solved this for the time being, instead of having the other cards be separate to the layout card, I have just included them in the same layout card which has fixed the alignment issue.

[Nick4 (Nick)]

Hi everyone, wishing you and everyone close to you a happy, healthy 2024!

I would like to have the temps/humidity from the rooms in 1 card so I’m trying to achieve this with this card.
This is what I have so far for a few rooms:

The problem is the border (horizontal line) between the name of the room and the data.
I would like to have this gone but tried all sorts of things that I’ve found but cannot get it removed.

type: custom:stack-in-card
mode: vertical
cards:
  - type: markdown
    content: <font color=#5794f2 size="5">Bathroom</font>
  - type: custom:button-card
    tap_action:
      action: none
    aspect_ratio: 2/1
    styles:
      card:
        - padding: 2%
        - font-size: 20px
        - text-shadow: 0px 0px 5px black
      grid:
        - grid-template-areas: '"temp temp" "hum hum"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr
      img_cell:
        - justify-content: start
        - align-items: start
        - margin: none
    custom_fields:
      temp: |
        [[[
          return `<ha-icon
            icon="mdi:thermometer"
            style="width: 20px; height: 28px; color: deepskyblue;">
            </ha-icon><span style="color: var(--text-color-sensor);">${states['sensor.bathroom_multi_temperature'].state}°c</span>`
        ]]]
      hum: |
        [[[
          return `<ha-icon
            icon="mdi:water-percent"
            style="width: 20px; height: 28px; color: deepskyblue;">
            </ha-icon><span style="color: var(--text-color-sensor);">${states['sensor.bathroom_multi_humidity'].state}%</span>`
        ]]]

Thanks a lot for helping me out!

ps: I’m also open for suggestions that might be better than what I’ve come up with

[Ildar_Gabdullin]

Suggest to start testing with a simpler case:

type: custom:stack-in-card
mode: vertical
cards:
  - type: markdown
    content: xxx
  - type: custom:button-card
    entity: sun.sun

and then increase your button step-by-step.
Actually, this is a common rule.

[Nick4 (Nick)]

Hi, thank you for you for that tip: it’s a good one!
This is what I get:

[Ildar_Gabdullin]

I see.
Consequences of “modern & shiny” border UI from HA 2022.11.
Try using this.

[Nick4 (Nick)]

Thank you very much, that was it!!!

[Ildar_Gabdullin]

The text is truncated by an inner card, not by stack-in-card.

[Ildar_Gabdullin]

Posting long code will not help you.
What MAY help you - replacing stack-in-card with a standard stack since it may point you a direction.