thomasloven / lovelace-layout-card

🔹 Get more control over the placement of lovelace cards.
MIT License
1.08k stars 127 forks source link

Cards disappear on tablet #235

Closed RemcoveHA closed 1 year ago

RemcoveHA commented 1 year ago

My Home Assistant version: 2023.2.3

Layout-card version (FROM BROWSER CONSOLE): 2.4.4

What I am doing: I am currently trying to make a dashboard for my tablet via de grid option.

What I expected to happen: I want to make 3 columns for now) with multiple rows. Some cards spend over more then one or two rows.

What happened instead: Cards disappear after a few seconds on my tablet. On my browser the view stays. It seems to only happen in the GRID variant. I currently just added a random 6 light switched in the horizontal variant and they stay visible on the tablet.

Minimal steps to reproduce:

views:
  - theme: ios-dark-mode-blue-red-alternative
    title: Home
    type: custom:grid-layout
    layout:
      grid-template-columns: 33% 34% 33%
      grid-template-rows: auto
      grid-template-areas: |
        "box1 box2 box3"
        "box1 box4 box5"
    badges: []
    cards:
      - type: picture
        image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
        tap_action:
          action: none
        hold_action:
          action: none
        view_layout:
          grid-area: box1
# End of code

Error messages from the browser console:


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

RemcoveHA commented 1 year ago

Ok it turns out the problem is with the Layout-Card plugin itself and not with the type of layout I chose. The only version that makes sure the cards stay visible is the standard masonary option from HA itself. Even the Masonary option from Layout-card lets the cards dissapear.


views:
  - theme: Backend-selected
    title: Home
    type: custom:grid-layout
    icon: mdi:home
    layout:
      grid-template-columns: 1fr 1fr 1fr
      grid-template-rows: auto
      grid-template-areas: |
        "header header header"
        ". messages ."
        "left middle right"
        "footer footer footer"
      mediaquery:
        '(max-width: 500px)':
          grid-template-columns: 1fr
          grid-template-areas: |
            "header"
            "messages"
            "left"
            "middle"
            "right"
            "footer"
        '(max-width: 1000px)':
          grid-template-columns: 1fr 1fr
          grid-template-areas: |
            "header header"
            "messages messages"
            "left right"
            "middle middle"
            "footer footer"
    badges: []
    cards:
#end of code

Anyone able to help?