Sometimes card border shown, sometimes it doesn't

[smenzer]

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!

[pbouna321]

Same thing happening to me here.

[pbouna321]

Same thing happening to me here.

So I just noticed this is only happening on the very first page of my dashboard. The other pages render just fine, but if I refresh any of them it renders borders and border radius again. Very weird.

[Aasikki]

I have this issue as well.

[colossatr0n]

I'm having this issue as well, but for me, it's only appearing on my mobile device while using the HA app for iOS. Pulling down to refresh the page doesn't fix it, but making any arbitrary edit to the card and then saving it fixes the issue until I reopen the app.

[pbouna321]

Yeah I was deleting spaces at the end of the yaml, then saving because it drives me nuts lol.

[colossatr0n]

_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.

[smenzer]

_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.

I tried this and it no luck for me when I added it to the 2nd horizontal stack in my original post.

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-title-card
        title: Living Room
  - type: horizontal-stack
    card_mod:
      style:
        .: |
          ha-card { border: none; } 
    cards:
      - type: custom:mushroom-template-card
        primary: Lights
        icon: mdi:lightbulb-group-off
        entity: light.group_upstairs_lights_living_area
        tap_action: ....
        layout: vertical
...

It still works fine on my chrome browser / desktop, but in the app on my iphone it doesn't help.

[pbouna321]

Seems like a lot of us are having this same issue. I wonder what happened with the code.

[colossatr0n]

@smenzer Do you have access to a Safari browser? If you do, you'll be able to figure out the exact element that needs border: none for it to render properly in the iOS app.

Also, did you try moving the card_mod yaml to be under one of the cards in the horizontal stack, e.g., putting it under custom:mushroom-template-card? You'll want the border properties to apply to the specific cards that have the borders, rather than the horizontal stack card itself.

For example:

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
        card_mod: # <---- Put it here and see if the border for the light.group_upstairs_lights_living_area card disappears.
          style:
            .: |
              ha-card { border: none; } 
...

[smenzer]

I do, I’ll play with it tonight to see what’s going on.

[smenzer]

So I tried adjusting the card_mod and that hasn't changed anything. It almost is as if the card-mod code is not running on the page when the borders are showing up...maybe there's a timing issue in loading the code, or a conflict, or cacheing issues? It's less about the selector since it is working sometimes, it's just missing code when it's broken.

Note - I also get this incorrect behavior in Chrome, so this isn't just a Safari issue.

[pbouna321]

So I tried adjusting the card_mod and that hasn't changed anything. It almost is as if the card-mod code is not running on the page when the borders are showing up...maybe there's a timing issue in loading the code, or a conflict, or cacheing issues? It's less about the selector since it is working sometimes, it's just missing code when it's broken.

Note - I also get this incorrect behavior in Chrome, so this isn't just a Safari issue.

It's for sure not just on Safari, It is happening on my Android phone and Brave browser. I noticed that the code is sometimes there and sometimes not there like you said too.

[pbouna321]

I do, I’ll play with it tonight to see what’s going on.

Any luck?

[smenzer]

the element that the border is set on seems to be the <ha-card> using :host to apply the border.

applying the card_mod to the individual cards in the horizontal stacks seems to have done the trick, though that's more tedious and annoying to change later, so i'm still trying to find a way to set that at the higher level.

what's so strange, though, is that it works sometimes at the horizontal stack level:

all i did was refresh the page and sometimes it works - in this instance above, you can see that the <ha-card> properly had the styles applied to it.

so, in summary - applying the card_mod to every card in the stack works (every time so far). applying it at the horizontal-stack level works most of the time, but not every time.

[Kanecaine]

applying the card_mod to the individual cards in the horizontal stacks seems to have done the trick, though that's more tedious and annoying to change later, so i'm still trying to find a way to set that at the higher level.

I just might found the solution for this: use card mod themes.

Stacked_Cards:
  card-mod-theme: Stacked_Cards
  card-mod-card: |
    ha-card.type-custom-vertical-stack-in-card {
      border: none;
    }

More info on how to use it:

https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes

I recently added this in a custom theme file and all borders are gone without having to add this style to every card. If you are already using a theme you can just simply add this to it.

edit: for using with mushroom, the corresponding css class has to be used, e.g. type-custom-mushroom-template-card and / or maybe a :host declaration. Something like this:

Stacked_Cards:
  card-mod-theme: Stacked_Cards
  card-mod-card: |
    ha-card.type-custom-mushroom-template-card {
      border: none;
    }

    :host {
      border: none;
    }

[Kanecaine]

Hello again, i gained further experience with my solution posted before. It's just not ideal because every card of this type will loose its border. So i tweaked it to this:

Stacked_Cards:
  card-mod-theme: Stacked_Cards
  card-mod-card: |
    /* container elements (consume the style) */
    ha-card.type-tile {
      border-width: var(--stacked-border-width, 1px);
    }

    /* container (define the style) */
    ha-card.type-custom-vertical-stack-in-card {
      --stacked-border-width: 0px;
    }

    /* extra classes - use in card yaml:
        card_mod:
          class: no-border no-bg
    */
    ha-card.no-border {
      box-shadow: none;
      border: 0px;
      border-radius: 0;
    }
    ha-card.no-bg {
      background: transparent;
    }

All elements (e.g. tile cards) in a container like the vertical stack card are getting a style which uses a css variable. The trick is to set the variable only for the container. So only tile cards within a vertical stack card are styled and have no borders. All other tile cards, somewhere in the view outside our container, are kepping its borders.

So you have to define this for every "container" you are using. No matter if this is a horizontal stack or Thomas Loven's layout card. And you have to define this for every card-type you are using ins such containers. In my example every tile card in vertical stacks is covered.

At last i defined some extra classes which can be assigned for single use e.g. when you are using a card only once inside a container and you do not want to write a rule for that card-type. You can combine these classes and decide per card if it should have only no border or no background too. Or you define what else you need.

In fact this makes the vertical-stack-in-card quite obsolete because its main feature for removing the borders can now be done with every "container card". I recommend using layout-card because of its flexible layout options.

For further inspiration on how to use card mod themes have a look at the corresponding thread, especially this post

[natejhowe]

+1. This is still an issue in the latest version. It seems to specifically be a problem with the vertical-stack element.

[schrammtastisch]

_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.

Thanks!! This did it for me where borders would show up after every refresh on both Windows and Android :D

[931122]

this is mycode card_mod: style: | ha-card { box-shadow: none; background: none; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; }