Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

layout-card resets style #289

Open
4 tasks done
jm-cook opened this issue Jun 3, 2024 · 2 comments
Open
4 tasks done

layout-card resets style #289

jm-cook opened this issue Jun 3, 2024 · 2 comments

Comments

@jm-cook
Copy link

jm-cook commented Jun 3, 2024

When I use the grid layout as the view directly in a dashboard all is fine and cards are rendered with rounded corners. However (#287) in order to render correctly on a nest hub, it is necessary to use a panel view with a layout-card inside (I know, it says not recommended, but I have no choice). Using the layout-card with a grid-layout is necessary to render the dashboard on a nest hub, but the ha-card-border-radius is lost, ie it is reset to zero somewhere and the cards are rendered with square corners.

The only workaround I have found is to use card_mod on every card to set the border-radius and I don't want to do that.

It makes no difference whether or not I use a theme that sets the border-radius.

My Home Assistant version: 2024.5.4

Layout-card version (FROM BROWSER CONSOLE): 2.4.5

What I am doing:

Using layout-card to render a panel

What I expected to happen:

The panel should be rendered with rounded corners in the individual cards

What happened instead:

The ha-card-border-radius is set to zero

Minimal steps to reproduce:

Create a new dashboard and replace the raw yaml with this:

# The least amount of code possible to reproduce my error
views:
  - title: test again
    path: test-again
    type: panel
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: repeat(3,auto)
          grid-template-rows: auto
          grid-template-areas: |
            "r1c1 r1c2 r1c3"
            "r2c1 r2c2 r2c3"
        cards:
          - type: markdown
            view_layout:
              grid-area: r1c1
            content: '## Placeholder'
          - type: markdown
            view_layout:
              grid-area: r1c2
            content: '## Placeholder'
          - type: markdown
            view_layout:
              grid-area: r1c3
            content: '## Placeholder'

# End of code

image

Using a grid-layout view:

image

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.
@jm-cook
Copy link
Author

jm-cook commented Jun 3, 2024

PS: I noticed that a single layout-card with layout-type: custom:grid-layout inside a view that is a grid-layout card works just fine :-)

Edit: but I forgot, then it doesnt work when casted :-(

@jm-cook
Copy link
Author

jm-cook commented Jun 5, 2024

#284 describes the same issue.

I tried the workaround #284 (comment) and it worked viewing the dashboard in a web browser. The workaround needs adding to your theme. Also be sure to read about themes in lovelace card mod https://github.com/thomasloven/lovelace-card-mod/tree/2.0.0 for the workaround to be able to reference your theme correctly.

Casted dashboard not yet tested.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant