Empty colum when using conditional and entity-filter cards

[friedit]

Checklist

• [x] I have updated to the latest available Home Assistant version.
• [x] I have cleared the cache of my browser.
• [x] I have tried a different browser to see if it is related to my browser.

The problem

When using conditional cards and/or entity-filter cards and all of them are hidden the first column is empty on desktop browsers. See screenshot.

Expected behavior

When using conditional cards and/or entity-filter cards the layout should adapt if all cards are hidden - meaning there shouldn't be a big hole in the frontend by having a column not having any content.

Steps to reproduce

Add conditional cards and entity-filter cards on the top of your view. In my case, I have 1 conditional card, followed by 3 entity-filter cards. Afterward add more cards. If none of the conditional and entity-filter cards are visible the first column is empty. This is only visible on desktop browsers - not on mobile.

Environment

• Home Assistant release with the issue: 0.107.5
• Last working Home Assistant release (if known):
• Browser and browser version: Chrome 80.0.3987.149
• Operating system: MacOS 10.15.3

Problem-relevant configuration

title: Overview
path: overview
icon: mdi:home
badges:
  - entity: person.thomas
    name: Thomas
    image: /local/persons/thomas.jpg
  - entity: person.takwa
    name: Takwa
    image: /local/persons/takwa.jpg

cards:
  - type: conditional
    conditions:
      - entity: calendar.haus
        state: "on"
    card:
      type: markdown
      title: Reminder
      content: |
        {{ states.calendar.haus.attributes.description }}

  - type: entity-filter
    show_empty: false
    entities:
      - light.living_room_couch
      - light.living_room_plants
      - light.kitchen
      - light.kitchen_sink
      - light.kitchen_coffee
      - light.dining_area
      - light.bedroom_main
      - light.bedroom_stripe
      - light.office
      - light.kids_room
      - light.terrace
      - light.cellar_entrance
      - light.cellar_hwr
      - light.cellar_storage
      - light.cellar_fitness
      - light.cellar_werkstatt
    state_filter:
      - "on"
    card:
      title: Active Lights
      show_header_toggle: true

  - type: entity-filter
    show_empty: false
    entities:
      - sensor.entrance_humidity
      - sensor.living_room_humidity
      - sensor.galery_humidity
      - sensor.bathroom_humidity    
      - sensor.bedroom_humidity
    state_filter:
      - operator: ">"
        value: 65
    card:
      title: High Humidity
      show_header_toggle: false

  - type: entity-filter
    show_empty: false
    entities:
      - binary_sensor.entrance_door
      - binary_sensor.bathroom_window
      - binary_sensor.bedroom_window
      - binary_sensor.office_window
      - binary_sensor.eg_restroom_window
      - binary_sensor.dining_room_sliding_door
      - binary_sensor.terrace_door
      - binary_sensor.og_restroom_window
      - binary_sensor.dressing_room_window
      - binary_sensor.kids_room_window
      - binary_sensor.couch_window
      - binary_sensor.kitchen_window
    state_filter:
      - "on"
    card:
      title: Open Windows & Doors
      show_header_toggle: false

  - type: custom:weather-card
    entity: weather.dark_sky

  - type: entities
    show_header_toggle: false
    title: Alarm Clock
    entities: 
      - input_boolean.alarm_clock_status
      - type: custom:fold-entity-row
        head: sensor.alarm_clock_time
        padding: 0
        entities:   
          - input_number.alarm_clock_hour
          - input_number.alarm_clock_minutes
          - input_boolean.alarm_clock_workday

  - type: entities
    title: Most used
    show_header_toggle: false
    entities:
      - entity: light.living_room_couch
        name: Couch Light
      - entity: light.dining_area
        name: Dining Area Light
      - entity: light.kitchen
        name: Kitchen Light
      - entity: cover.living_room_couch
        name: Couch Blinds
      - entity: cover.living_room_plants
        name: Plants Blinds
      - entity: cover.dining_area
        name: Sliding Door Blinds
      - entity: cover.bedroom
        name: Bedroom Blinds

  - type: entities
    title: Information
    show_header_toggle: false
    entities:
      - entity: group.window_sensors
        name: Windows
        icon: mdi:window-closed
      - type: section
      - sensor.living_room_temperature
      - sensor.bedroom_temperature 
      - sensor.average_cellar_temperature 
      - type: custom:auto-entities
        filter:
          include:
            - group: group.temperature_sensors
        card:
          type: custom:fold-entity-row
          head:
            type: section
            label: Temperatures
      - type: custom:auto-entities
        filter:
          include:
            - group: group.humidity_sensors
        card:
          type: custom:fold-entity-row
          head:
            type: section
            label: Humidity

Javascript errors shown in your browser console/inspector

Additional information

This seems to have already been reported in earlier versions: https://github.com/home-assistant/frontend/issues/1686

[szimszon]

Hi,

I have the same issue with conditional and entity filter cards in Frontend version: 20200407.2 - latest .

[boesing]

Still an issue with 20200519.4. Sometimes it works, sometimes not. If you toggle edit-mode on/off, some cards jump around and fill the empty columns but thats not the case on hard-reload or initial request.

[HarrisonPace]

Still experiencing this on 0.112.2, acts if the card existed in place.

[stale[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue now has been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[s-hutter]

Issue is still present in 0.115.6.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[vertex29]

Issue is still present in 2021.1.0

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[boesing]

Issue still ignored.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[gazpachoking]

This is still an issue with the latest version.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[HarrisonPace]

This issue persists in the latest version.

[guilhermebera]

This issue persists in the latest version.

[Olum-hack]

I think this issue still exists. I'm using Home Assistant Core 2022.5.2 and have the same.

[slunat]

Can confirm this issue is still present. They are very ugly to use at the moment as they create empty space.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[szimszon]

On 2022.8.4 the issue is still there. ;(

[jhansche]

Disclaimer: it's been over ~10+ years since my html/js/css days. In fact, shadow roots and custom dom elements did not exist when I last touched web.

Through some experimentation, I was able to apply a css style that appears to work, in my limited tests (in Chrome):

var colStyles = document.createElement("style");
colStyles.innerHTML = "#columns .column:not(:has(>*:not([hidden]))) { flex-grow: 0; }\n";
document.querySelector('home-assistant').shadowRoot
    .querySelector("home-assistant-main").shadowRoot
    .querySelector("ha-panel-lovelace").shadowRoot
    .querySelector("hui-root").shadowRoot
    .querySelector("hui-masonry-view").shadowRoot
    .appendChild(colStyles);

I think we could add a patch/hui-masonry-view.ts in card-mod to accomplish this.

Or I think we can just make the change here, in static get styles():

.column:not(:has(>*:not([hidden]))) {
  flex-grow: 0;
}

The breakdown of the selectors:

1. div.column - this is the element that makes up each column in the view
2. >*:not([hidden]) - selects "direct child elements that do not contain a 'hidden' attribute" => in other words "any non-hidden elements, aka any visible element"
3. .column:not(:has(...)) - "columns that do not contain those^" => in other words: columns that do not contain any non-hidden (aka visible) cards

We can then override the default .column { flex } style, by setting flex-grow: 0, which causes that column to collapse.

Unfortunately this won't work just by dropping in a Lovelace stylesheet resource, so it really can only be done by patching the custom element as in card-mod, or by fixing the styles in frontend. And another option would be a custom javascript resource that does the DOM traversal like above.

Note that there is not 100% support for these selectors:

• https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility - Firefox does not support the :has() selector
• https://developer.mozilla.org/en-US/docs/Web/CSS/:not#browser_compatibility - this looks okay, because opera android only does not support a list selector (and we're not using a list here)

Also note that this only works if the element is explicitly hidden (by setting element.hidden = true, or html <hui-conditional-card hidden>). In other words, it will not work to test visibility of an element that is hidden by any other means (like a .hidden class or other css rule that hides it).

[jhansche]

I confirmed that adding this as a local javascript resource appears to resolve the empty column. However, this is a very exact DOM path that it has to traverse, so it is pretty fragile.

// file: /config/www/fix-conditional-column.js
// added at http://$HA/config/lovelace/resources, with path: /local/fix-conditional-column.js
customElements.whenDefined("hui-masonry-view").then(() => {
    const doPatch = function () {
        var colStyles = document.createElement("style");
        colStyles.innerHTML = "#columns .column:not(:has(>*:not([hidden]))) { flex-grow: 0; }\n";
        // FIXME: this layout may not always be valid. Would be better to patch it directly in masonry
        document.querySelector('home-assistant').shadowRoot
            .querySelector("home-assistant-main").shadowRoot
            .querySelector("ha-panel-lovelace").shadowRoot
            .querySelector("hui-root").shadowRoot
            .querySelector("hui-masonry-view").shadowRoot
            .appendChild(colStyles);
    };
    // hui-masonry-view has been defined, but that doesn't mean it has been created under hui-root yet. Add a delay.
    setTimeout(doPatch, 100);
});

Would appreciate if others having this issue could test out the above. If it appears to be working, I don't mind opening a PR to add the style.

UPDATE: this isn't a perfect fix, as there are still times where these selectors won't be used. The way the card-mod handled this is probably better (by defining a custom-pseudo-selector syntax that uses Promise/await to wait for each selector+shadow to become available before proceeding). However, if the change in #16351 is merged, then we don't need to do this. If that doesn't get accepted for any reason, my next choice would likely be a new PR for card-mod that would do it with a monkeypatch.

---

Just thinking out loud here: someone else mentioned in another (duplicate, now since closed) issue that this is actually (somehow?) the longest standing (frontend) issue in HA history. If that's true, I'll be happy to wear that badge of honor 😎

[Sarnog]

Can anybody help me please? I can't get this combination of cards to work.

The idea is to have a card that only shows up when there's an update. If it's an update from HACS, it shows witch update it is (instead of only having a number of how many updates HACS has). The updates from within home assistant are already specified, so they show up as well)

Here's the code:

type: custom:auto-entities
show_header_toggle: false
card:
  type: entities
  title: Add-on & Integratie Updates
  show_header_toggle: false
  filter:
    include:
      - domain: update
        state: 'on'
      - entity_id: sensor.hacs
        state: '! 0'
  show_empty: false
  sort:
    method: last_triggered
- type: markdown
  title: HACS Updates
  content: |-
    {%- if is_state('sensor.hacs','0') -%}
      <b><font color=green>No updates</font></b>
    {%- else -%}
      <table width=100%>
      {%- set hacs_updates = state_attr('sensor.hacs','repositories') -%}
      {%- for hacs_update in hacs_updates -%} 
        <tr><td><b><font color=red>{{[hacs_update][0]['display_name']}}</b></font></td><td>{{[hacs_update][0]['installed_version']}}</td><td>{{[hacs_update][0]['available_version']}}</td></tr>
      {%- endfor -%}
      </table>
    {%- endif -%}