Entities card with conditional row - card’s height is changing when it shouldn’t

ildar170975 commented 3 years ago

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 an Entities card has at least one conditional row (one row if condition "true", another row if condition "false" - i.e. "show one row instead another row"), then the card's height is changing dependently on condition - but it shouldn't since total number of rows is not changing. Look at the pics below: https://community-assets.home-assistant.io/optimized/3X/f/a/fa3d51ea8ad8d1cf85722e3c73911c08738bdcf3_2_690x127.jpeg https://community-assets.home-assistant.io/optimized/3X/c/5/c54c23bac64adeaebd0779b30f5138d894edb780_2_690x137.jpeg

Expected behavior

Both the cards should have the same height - because total number of rows was not changed.

Steps to reproduce

Create 2 cards (code is provided below).
Place them in one line.
Note that both the cards have the same height.
Switch a state on any of these cards.
Now you see that one card has a bigger height.

Environment

Home Assistant release with the issue: 0.116.0
Last working Home Assistant release (if known):
Browser and browser version: Firefox 81.0.1
Operating system: Win10x64

State of relevant entities

Problem-relevant configuration

Card 1:

type: entities
entities:
  - input_boolean.test_boolean
  - type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: 'on'
    row:
      entity: sun.sun
  - type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: 'off'
    row:
      entity: sun.sun

Card 2:

type: entities
entities:
  - entity: input_boolean.test_boolean
  - entity: sun.sun

Javascript errors shown in your browser console/inspector

Additional information

spacegaier commented 3 years ago

I traced the problem, but I am unable to find a good solution currently.

These CSS selectors cannot take into account whether an element is hidden or not, so if the bottom or top entity in a card is hidden the margins do not properly add up, resulting in the size jumps:

https://github.com/home-assistant/frontend/blob/9fbc94e8d82701c022e02f113664e77ed277d206/src/panels/lovelace/cards/hui-entities-card.ts#L256-L262

github-actions[bot] commented 3 years ago

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.

ildar170975 commented 3 years ago

ver 2021.1.4 - the problem is still present.

github-actions[bot] commented 3 years ago

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.

ildar170975 commented 3 years ago

2021.4.6 - problem still present.

github-actions[bot] commented 3 years ago

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.

ildar170975 commented 3 years ago

2021.7.1 - the bug is present

github-actions[bot] commented 2 years ago

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.

ildar170975 commented 2 years ago

2021.10.6 - the bug is present

ildar170975 commented 2 years ago

2021.11.5 - the bug is present

emufan commented 2 years ago

These CSS selectors cannot take into account whether an element is hidden or not, so if the bottom or top entity in a card is hidden the margins do not properly add up, resulting in the size jumps:

I think some libraries as jquery can distinguish between hidden and not hidden items. Perhaps this can be adopted here as well?

Other wise, why has the hui-vertical-stack-card top margin 4 and bottom margin 8 and the included items have 4+4 but only the first has 0(top)+4(bottom) and the last 4+0.

The problem would not be there, if hui-vertical-stack-card has only 0+4 and every ìncluded item would have 4+4. Or am I wrong? Then you don't have to distinguish between hidden and shown items.

github-actions[bot] commented 2 years ago

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.

emufan commented 2 years ago

Problem still there.

karwosts commented 1 year ago

While I admit this is not a fix, if the changing height bothers you, you can add this item as the last element in the list:

  - type: divider
    style:
      display: none

This adds an invisible div as the last item in the entites list, and therefore the card height will no longer change when entities become conditionally visible/invisible.

Maybe also need one as the first item in the list, depending on where your conditional elements are.

github-actions[bot] commented 9 months ago

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.

ildar170975 commented 9 months ago

up

github-actions[bot] commented 6 months ago

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.

ildar170975 commented 6 months ago

up

Mariusthvdb commented 3 months ago

While I admit this is not a fix, if the changing height bothers you, you can add this item as the last element in the list:
  - type: divider
    style:
      display: none
This adds an invisible div as the last item in the entites list, and therefore the card height will no longer change when entities become conditionally visible/invisible.

Maybe also need one as the first item in the list, depending on where your conditional elements are.

cant help but wondering if introducing an 'else' wouldn't fix this.

Talked/wondered about the lack of a default value (else) on the core conditional very often, and it in fact seems the only true missing feature now, compared to eg custom:state-switch.

it would allow the 2 conditionals to be written as 1, and hence only take 1 spot in the entities card

so. in stead of

    - type: entities
      entities:
        - input_boolean.test
        - type: conditional
          conditions:
            - entity: input_boolean.test
              state: 'on'
          row:
            entity: sun.sun
        - type: conditional
          conditions:
            - entity: input_boolean.test
              state: 'off'
          row:
            entity: sun.sun

use:

    - type: entities
      entities:
        - input_boolean.test
        - type: conditional
          if:
            conditions:
              - entity: input_boolean.test
                state: 'on'
          row:
            entity: sun.sun
          else:
          row:
            entity: sun.sun

btw, the fact the vertical-stack does not suffer this when using the identical conditions on eg a core entity card, would give us reason to think the entities card should be 'fixable'?

    - type: vertical-stack
      cards:
        - type: entity
          entity: input_boolean.test
        - type: conditional
          conditions:
            - entity: input_boolean.test
              state: 'on'
          card:
            type: entity
            entity: sun.sun
        - type: conditional
          conditions:
            - entity: input_boolean.test
              state: 'off'
          card:
            type: entity
            entity: sun.sun

https://github.com/home-assistant/frontend/assets/33354141/ec0fd74a-1dad-4aeb-ad6f-a76089869401

github-actions[bot] commented 3 weeks ago

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.

ildar170975 commented 3 weeks ago

Up

home-assistant / frontend