vertical-stack-in-card icon indicating copy to clipboard operation
vertical-stack-in-card copied to clipboard

Card border shown when conditional card is used

Open Kire88Visser opened this issue 2 years ago • 12 comments

When using the conditional card the card that is displayed when the condition is true has a border around it (see below for the TV and fridge icons). 2022-11-05 13_44_29-New dashboard – Home Assistant

Also occasionally when loading the HA page the borders appear around all the cards that are within the vertical stack in card. Reloading often removes the borders again, but never for the conditional card.

Kire88Visser avatar Nov 05 '22 12:11 Kire88Visser

I’m having the same issues, more in general the borders are shown whenever the stack in card is nested inside any type of card. If you are using CARD_MOD you can manually solve the problem using the following card_mod style in the nested card:

type: custom:vertical-stack-in-card
card_mod:
  style: |
    ha-card {
      border: none;
    }

SinisterMedusa avatar Nov 06 '22 17:11 SinisterMedusa

This seems to be working if you dont have any themes enabled :/

In configuration window where theme does not apply : kuva

And in desktop after saving : kuva

Tontze avatar Dec 10 '22 22:12 Tontze

I’m having the same issues, more in general the borders are shown whenever the stack in card is nested inside any type of card. If you are using CARD_MOD you can manually solve the problem using the following card_mod style in the nested card:

type: custom:vertical-stack-in-card
card_mod:
  style: |
    ha-card {
      border: none;
    }

Not working for me, as soon as sensor is updated, card is redrawn and border appears.

alanmilinovic avatar Dec 18 '22 14:12 alanmilinovic

@Kire88Visser Hey, off-topic but, which weather card is that? It looks nice.

itspt1 avatar Dec 19 '22 17:12 itspt1

@itspt1 its the clock weather card: https://github.com/pkissling/clock-weather-card

Kire88Visser avatar Dec 19 '22 17:12 Kire88Visser

Can this be fixed in vertical-stack-in-card? Maybe by passing a config option borders: true|false ?

bcutter avatar Jan 07 '23 21:01 bcutter

This is how I fixed it, but not by putting it on vertical-stack-in-card, I use it on cards that are having the actual border. I am not using card_mod and this is the only solution that worked for me.

style: |
    ha-card {
      border: 0px;
    }

alanmilinovic avatar Jan 07 '23 21:01 alanmilinovic

I have the same issue.. style won‘t work for me:

  - type: conditional
    conditions:
      - entity: sensor.time_to_new_fire_wood_living_room
        state_not: '0:00:00'
      - entity: sensor.phase_living_room
        state_not: Standby
    card:
      type: custom:mushroom-entity-card
      entity: sensor.time_to_new_fire_wood_living_room
      name: Zeit zum Nachlegen
      icon: mdi:clock-outline
      primary_info: state
      secondary_info: name
      style: |
        ha-card {
          border: 0px;
        }

tofrie avatar Feb 05 '23 09:02 tofrie

Looks like:

87C39A05-5F6F-4894-AAE7-01A67B9D5BBE

tofrie avatar Feb 05 '23 09:02 tofrie

Looks like:

87C39A05-5F6F-4894-AAE7-01A67B9D5BBE

I also have it from time to time, for example when HA is warming after reboot. I just close HA and reopen it.

Also have you placed style on correct element? Have you cleared browser cache?

alanmilinovic avatar Feb 05 '23 10:02 alanmilinovic

I posted my code snippet above. The condition is part of vertical stack. The style is placed in the card with border. I tried different browser and HA App on iPhone.

tofrie avatar Feb 05 '23 11:02 tofrie

I posted my code snippet above. The condition is part of vertical stack. The style is placed in the card with border. I tried different browser and HA App on iPhone.

Try to put it on vertical-stack-in-card then. I don't know, in my case it worked well.

alanmilinovic avatar Feb 05 '23 11:02 alanmilinovic