vertical-stack-in-card: Sometimes card border shown, sometimes it doesn't

This is a bit of a weird one… I’m using a vertical stack in card with two horizontal stacks inside. Sometimes when I load the dashboard (could be on mobile app, my laptop via the web, etc) I see borders between the cards in the horizontal stack. If I refresh the page, the borders go away. Sometimes I open it back up and the borders are there again. I don’t want the borders to appear, but I can’t figure out how to consistently keep them away.

Here’s a screenshot of me opening the same dashboard twice in a row, once where the borders appeared and once where it didn’t.

As you can see, on the right side where it appears the way I want, there are styles added directly to the <mushroom-template-card> and <ha-card> to remove the border. I’m not using card-mod or anything like that, so I don’t know why these appear sometimes and not others. Below is the yaml code for the Living Room card (w/some details removed to make it easier to read):

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-title-card
        title: Living Room
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Lights
        icon: mdi:lightbulb-group-off
        entity: light.group_upstairs_lights_living_area
        tap_action: ....
        layout: vertical
      - type: custom:mushroom-climate-card
        entity: climate.upstairs_hallway_thermostat
        name: Climate
        layout: vertical
      - type: custom:mushroom-template-card
        primary: TV Outlet
        icon: mdi:power-plug
        entity: switch.living_room_smart_outlet_tv_bottom
        icon_color: green
        layout: vertical
        fill_container: true
      - type: custom:mushroom-template-card
        primary: TV
        icon: si:messenger
        entity: select.living_room_harmony_hub_activities
        icon_color: purple
        layout: vertical

I’ve been reading that I can use card-mod to remove the borders…which I might do. Bit I wanted to share since this seems like a bug, and I’d rather avoid adding a bunch of card-mods if I can avoid it.

Thanks!

About this issue

Original URL
State: open
Created a year ago
Reactions: 1
Comments: 18

Most upvoted comments

If anyone is using card_mod HACs integration inside the vertical-stack-in-card, the following might help.

Since I’m seeing this issue in the iOS app, I figured the issue would show up in Safari, and it did. After inspecting the DOM, I found out that adding border: none to ha-card in the card_mod yaml fixed the issue in both Safari and the iOS app.

Here’s a simplified version of my card:

type: custom:vertical-stack-in-card
cards:
  - type: entities
    entities:
      - entity: timer.timer2
    card_mod:
      style: # vvv This fixed the border issue for this card
        .: |
          ha-card { border: none; } 
# ...

Not sure why Safari/iOS needs this fix for it to render properly when the Brave browser works just fine without it.

colossatr0n on Mar 26, 2023