Cards not Reflowing in Lovelace View

Configuration
1

Hi, everyone

I’m a relative newcomer to Home Assistant in general, and Lovelace setup in particular.

I’ve come up with a problem I can’t really figure out: on a specific Lovelace view, my cards aren’t reflowing to fill the available screen real estate:

LovelacePane1
LovelacePane11584×789 32.3 KB

LovelacePane2
LovelacePane21584×788 36.2 KB

Given the 3 cards present in this view, shouldn’t Lovelace be rearranging them already?

Each card is a custom (to remove borders) stack-in-card, btw.

If anyone can point me in the right direction, I’d greatly appreciate it.

Cheers,

2

I’ve seen several people (including myself) reporting this issue, but no solution yet…

3

Read your post on the other thread. So this wasn’t happening to you on the previous version, before 0.108?

My guess is that stack-in-cards’ height isn’t being properly calculated, so the cards aren’t reflowed. Adding a couple of the “standard”, built-in cards gets the stack-ins moving; and so does adding many stack-in-cards. This seems to all point in the same direction.

4

I use the custom layout-card. In my UI I decided to go with two columns. So here is a tab view

title: Home
#background: radial-gradient(dimgray, black)
icon: mdi:home-assistant
panel: true
cards:
  - type: custom:layout-card
    max_columns: 2
    cards:
      - !include home_alert_card.yaml
      - !include home_glance_card.yaml
      - break
      - !include home_doors_card.yaml
      - !include home_lights_card.yaml
      - !include home_media_card.yaml

You put the view in panel mode and use a break where you want the next column to start.

And then here is one of the cards.

type: entity-filter
title: Alert
entities:
  - alert.alarm_triggered
  - alert.alarm_trouble
  - alert.garage_open
  - sensor.obihai_reboot_required
  - entity: sensor.nws_alert
    state_filter:
      - value: ^[1-9]
        operator: regex
state_filter:
  - 'on'
  - 'true'
show_empty: false
card:
  type: entities
  title: Alerts
  show_header_toggle: false
  style: "ha-card { background: red; }"

For a cell phone you get one column and for tablet or computer you get two columns in both instances filling the screen. Works great.

5

Frankly speaking I’m not sure when it started exactly, but my impression is that it was introduced with 0.107…

6

Thanks for pointing that out; though I was already aware of the option, it’s a separate thing.

7

'Just to clarify, things were working properly for you at some point, correct? I can’t really assess on my end, because I didn’t have these cards and view setup before.

8

So the single column in the center of the screen started happening on my system a release or two ago. If the total height of the cards is close to the screen height the system will give you a single column which makes some sense. The simplest way I found to get the cards flowing again the way I wanted and properly handle different screen sizes was the layout-card. The results I have found are always predictable and the layouts look good.

9

Yes, exactly! All layaouts were flowing across screen as expected (first horizontally then vertically) and then at some point of time started to align veritcally. BUT not in all views! I have some that work properly (also not changed recently :slight_smile:
One more observation; when I hit refresh button:

  • some views realign cards properly (e.g. if there is enough cards and screen space realign to 3 columns)
  • some do this partially (e.g. realign to 2 column, even if there is a space for 3)
  • some do not change layout, staying vertical.

Above might depend on combination of cards being used (stock, custom)… but since most of my views use many (and different) components it is a bit hard to draw conclusion on which cards might cause problems.

10

I’m goint to open a GitHub ticket on this issue: I’ll update this thread with the link.