Card_mod behaves differently with grid layout

[tilz0R (Tilen)]

Problem solved: It was the wrong version of card_mod.

I use the card mod and layout card from Thomas Loven quite extensively. But I’ve come across strange issue I can’t manage to understand.

The intent is to have a simple mini graph card showing just graph, no other data:

type: custom:mini-graph-card
entities:
  - entity: sensor.living_room_average_temperature
    color: red
line_width: 0
height: 60
show:
  icon: false
  state: false
  name: false
  legend: false
  labels: false
card_mod:
  style: |
    ha-card {border-style: none; background: none; border-radius: 0;}
    :host {border-style: none; background: none; border-radius: 0;}

When rendered, I get what I want (picture below). Card mod is used to remove the white background (now is transparent) and to remove the border radius.

In my final design, I want to use this card as part of the button-card, which is inside the grid layout, which then new yaml looks like so:

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: repeat(auto-fill, min(260px))
cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.living_room_average_temperature
        color: red
    line_width: 0
    height: 60
    show:
      icon: false
      state: false
      name: false
      legend: false
      labels: false
    card_mod:
      style: |
        ha-card {border-style: none; background: none; border-radius: 0;}
        :host {border-style: none; background: none; border-radius: 0;}

But when rendered, card_mod part is not accepted and I don’t get the desired result:

I can’t understand why the difference if widget is inside or not the grid layout?

[Ildar_Gabdullin]

This is not about card-mod, this is about particular styles:

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: repeat(auto-fill, min(260px))
cards:
  - type: entity
    entity: sun.sun
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.ac66u_nvram_free
    card_mod:
      style: |
        ha-card {border: 1px solid red;}

Use Code Inspector to select proper attributes.

[tilz0R (Tilen)]

I think I must disagree. Why it works if the element is not part of the grid and not if it is part of the grid?

type: vertical-stack
cards: 
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.sun_solar_azimuth
        color: red
    card_mod:
      style: |
        ha-card {border-style: none; background: none; border-radius: 0;}
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      overflow-y: auto
    cards:
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.sun_solar_azimuth
            color: red
        card_mod:
          style: |
            ha-card {border-style: none; background: none; border-radius: 0;}

This is in the inspector for the top graph on the picture above:

The mini graph ha-card and the card-mod cards are in the same level for the top graph on the picture above.

While there is no card-mod part for the bottom graph:

Even if I replicate your demo:

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: repeat(auto-fill, min(260px))
cards:
  - type: entity
    entity: sun.sun
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.sun_solar_azimuth
    card_mod:
      style: |
        ha-card {border: 1px solid red;}

I don’t get red border:

[Ildar_Gabdullin]

@tilz0R

I don’t get red border:

Check if you have card-mod 3.4.4 (the LATEST one) installed

[tilz0R (Tilen)]

Here is the trick. Thanks. Works now. I was under impression HA will offer an update if there is a new release.

[Ildar_Gabdullin]

I wonder if you were running 3.5.0 ?)

HACS usually gives notifications about new versions.
If you are installing 3rd party plugins manually - it is only up to you to monitor updates.

[tilz0R (Tilen)]

Yes it was 3.5.0. Before my redownload, it said 3.5.0 on the icon where you see 3.4.4 below:

Might be I pressed update some time ago without noticing.

[Ildar_Gabdullin]

In this particular case it was not your fault, 3.5.0 was the latest and you obviously wanted to download it. But this version was cancelled a few days after its release.