Interference in custom:stack-in-card

[ildar170975]

My Home Assistant version: 2022.2.4

Layout-card version (FROM BROWSER CONSOLE): 2.3.1

What I am doing: Using a custom:stack-in-card on the view with "horizontal-layout".

What I expected to happen: The card is displayed properly.

What happened instead: The card is NOT displayed properly.

Minimal steps to reproduce:

1. Create an empty view.

2. Add the only card with custom:stack-in-card:

   title: stack
   path: test-stack-xxxx
   ###type: custom:horizontal-layout
   badges: []
   cards:
   
   - type: custom:stack-in-card
   mode: vertical
   title: xxx
   keep:
     background: true
     box_shadow: false
     margin: false
     outer_padding: false
     border_radius: false
   cards:
     - type: entities
       entities:
         - sun.sun
       card_mod:
         style: |
           ha-card {
             --ha-card-background: red;
           }
     - type: entities
       entities:
         - sun.sun
       card_mod:
         style: |
           ha-card {
             --ha-card-background: orange;
           }

3. Refresh the page; it should be looking like this:

4. Check the style:

5. Uncomment the commented line in the code - make the view to be "horizontal-layout".

6. Refresh the page; it looks like this:

7. Check the style:

In the 1st case (with default layout) the margin between internal cards was 0. In the 2nd case (with "horizontal-layout") it is 4px.

I do not know what could be a reason of it - stack-in-card or layout-card. The only thing I know that this happened since 2022.2.

I am ready to address the same issue to the developer of stack-in-card.

Error messages from the browser console: None

---

By putting an X in the boxes ([X]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• [x] Have made sure I am using the latest version of the plugin.
• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[ildar170975]

Same is with vertical-layout.

[gfandrea]

I have a similar problem, I have a set of cards created with vertical-stack-in-card that normally I see like this:

but when i choose a layout from layout-card, this is what i see:

It is like the second part of each stack-in-card is not show.

This is the code of one card

type: custom:vertical-stack-in-card
styles:
  '--chip-box-shadow': none
  '--chip-background': none
  '--chip-spacing': 0
cards:
  - type: custom:mushroom-template-card
    secondary: Cucina e soggiorno
    icon: mdi:sofa
    tap_action:
      action: navigate
      navigation_path: soggiorno
    icon_color: blue
    multiline_secondary: true
    primary: Zona giorno
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.temperatura_soggiorno
        icon_color: blue
      - type: entity
        entity: sensor.umidita_soggiorno_knx
        icon_color: blue

[gfandrea]

Using stack-in-card and not vertical-stack-in-card solved my problem. Sometimes the easier solution is the correct one...

[ildar170975]

@gfandrea I do not think your case is related to the issue.

1. This is about stack-in-card, not vertical-stack-in-card.
2. The issue is about loosing settings for margins in case of using layout-card.