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

[ildar170975]

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

1. Create 2 cards (code is provided below).
2. Place them in one line.
3. Note that both the cards have the same height.
4. Switch a state on any of these cards.
5. 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]

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:

frontend/src/panels/lovelace/cards/hui-entities-card.ts

Lines 256 to 262 in 9fbc94e

	#states > *:first-child {
	margin-top: 0;
	}
	#states > *:last-child {
	margin-bottom: 0;
	}

[github-actions]

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]

ver 2021.1.4 - the problem is still present.

[github-actions]

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]

2021.4.6 - problem still present.

[github-actions]

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]

2021.7.1 - the bug is present

[github-actions]

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]

2021.10.6 - the bug is present

[ildar170975]

2021.11.5 - the bug is present

[emufan]

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]

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]

Problem still there.

[karwosts]

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]

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]

up

[github-actions]

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]

up