Panel view, 2024.4: no borders & box-radius for child cards

[ildar170975]

My Home Assistant version: 2024.4.1

Layout-card version (FROM BROWSER CONSOLE): 2.4.4

What I am doing:

Consider this card in a PANEL view (default HA theme):

type: custom:layout-card
layout_type: vertical-layout
cards:
  - type: entity
    entity: sun.sun
  - type: entity
    entity: sun.sun
  - type: entity
    entity: sun.sun

In editor everything looks OK:

In the view - no borders & box-radius applied for child cards:
Edit mode:

Normal mode:

In masonry - everything is OK:
Edit mode:

Normal mode:

Probably related to these changes:
home-assistant/frontend#20122
home-assistant/frontend#20135
home-assistant/frontend#20264

Error messages from the browser console:
none

---

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

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• Have made sure I am using the latest version of the plugin.
• Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
• 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]

Related: thomasloven/lovelace-card-mod#369

[bkr1969]

I find it very odd that the rendering is correct in the editor, but no rounded corners otherwise. I have added car-mod code to a few of the more important items, but would prefer not to have to add it to every single item.

[ildar170975]

Absolutely not odd since cards in a panel mode are rendered differently.

[e46lux]

My dashboard is a panel layout that contains a layout-card that subsequently has everything inside of it.

Resolved mine with the following addition in the theme yaml (my card_mod style wasn't getting inserted by applying card-mod to layout-card directly, so I had to go up a shadow root and drill into it via theme card-mod-view-yaml):

  card-mod-view-yaml: |
    hui-panel-view$: |
      * {
        --ha-card-border-radius: inherit !important;
        --ha-card-border-width: inherit !important;
        --ha-card-box-shadow: inherit !important;
      }

via element explorer > select layout-card element, filter for border > devtools told me that apparently layout-card was the first (top-most) element that is setting those values to 0, everything below inherits that value (0/none) via this style in layout-card:

* {
    --ha-card-border-radius: 0;
    --ha-card-border-width: 0;
    --ha-card-box-shadow: none;
}

[jeremynoesen]

My dashboard is a panel layout that contains a layout-card that subsequently has everything inside of it.

Resolved mine with the following addition in the theme yaml (my card_mod style wasn't getting inserted by applying card-mod to layout-card directly, so I had to go up a shadow root and drill into it via theme card-mod-view-yaml):

  card-mod-view-yaml: |
    hui-panel-view$: |
      * {
        --ha-card-border-radius: inherit !important;
        --ha-card-border-width: inherit !important;
        --ha-card-box-shadow: inherit !important;
      }

via element explorer > select layout-card element, filter for border > devtools told me that apparently layout-card was the first (top-most) element that is setting those values to 0, everything below inherits that value (0/none) via this style in layout-card:

* {
    --ha-card-border-radius: 0;
    --ha-card-border-width: 0;
    --ha-card-box-shadow: none;
}

This unfortunately does not work for me using a casted dashboard. It works for the dashboard when it is not casted though.

[DTekNOdev]

My dashboard is a panel layout that contains a layout-card that subsequently has everything inside of it.

Resolved mine with the following addition in the theme yaml (my card_mod style wasn't getting inserted by applying card-mod to layout-card directly, so I had to go up a shadow root and drill into it via theme card-mod-view-yaml):

  card-mod-view-yaml: |
    hui-panel-view$: |
      * {
        --ha-card-border-radius: inherit !important;
        --ha-card-border-width: inherit !important;
        --ha-card-box-shadow: inherit !important;
      }

via element explorer > select layout-card element, filter for border > devtools told me that apparently layout-card was the first (top-most) element that is setting those values to 0, everything below inherits that value (0/none) via this style in layout-card:

* {
    --ha-card-border-radius: 0;
    --ha-card-border-width: 0;
    --ha-card-box-shadow: none;
}

This works in a web browser but not on a google nest hub when casting.

[madkatz01]

Can someone explain how I add this to the theme yaml?

[MelleD]

Hey @e46lux,

did you add this to the standard theme or to (your) custom theme?

[DTekNOdev]

This solution (the one that I quoted earlier) is not needed anymore if you use a sections view instead of panel view with layout-card. Sections view is much more mushroom friendly and you don't need to fiddle with the layout. You can take a look at my sections based mushroom card dashboard here:

https://github.com/jm-cook/my-smart-home/tree/main/nest-hub-dashboard

I see there is a mistake in the document as it still says to load the lovelace layout card. AFAIK this is no longer needed.

[MelleD]

@jm-cook thanks work :)

[JosephB10]

I ran into the same issue with border-radius showing properly in the editor but not being rendered to the dashboard.
For some reason I can't understand adding the style overflow: hidden caused the border-radius to render properly.

Doesn't render border-radius

...
styles:
  card:
    - padding: 22px
    - align-self: start
    - width: 1920px
    - height: 1080px
    - opacity: 1
    - background-color: green
  custom_fields:
    buttons:
      - position: absolute
      - top: 700px
      - left: 800px
      - width: 400px
      - background-color: rgb(24,24,24)
      - border-radius: 20px
      - z-index: 1
      

Does Render

styles:
  card:
    - padding: 22px
    - align-self: start
    - width: 1920px
    - height: 1080px
    - opacity: 1
    - background-color: green
  custom_fields:
    buttons:
      - position: absolute
      - top: 700px
      - left: 800px
      - width: 400px
      - background-color: rgb(24,24,24)
      - border-radius: 20px
      - z-index: 1
      - overflow: hidden