Gap in stack cards, when using conditional card and condition is false

[emufan]

trafficstars

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.

Describe the issue you are experiencing

If you are using a conditional card in side a vertical-stack or horizontal-stack card and if it placed at first or last position, the stack cards adds/shows nevertheless the space before/after the first/last visible card if the condition is false.

This picture shows two cards. First, a 3-card-stack without any conditions. Second, a 3-card-stack with first cards is condition-true. Every gap is of course equal.

This picture shows two cards. First, a 3-card-stack without any conditions. Second, a 3-card-stack with first cards is condition-false. There is still the gap, as the card would be condition true.

If placed between cards, there is no additional gap in these cases.

Same is happening 1:1 with horizontal-stack.

Describe the behavior you expected

There should not be a displayed space if there is a condition false card in placem it has to be handled as there would be no card.

Steps to reproduce the issue

      - type: vertical-stack
        cards:
          - type: entities
            entities:
              - entity: sensor.thermometer_aussen_minimum
          - type: entities
            entities:
              - entity: sensor.thermometer_aussen_minimum
          - type: entities
            entities:
              - entity: sensor.thermometer_aussen_minimum
      - type: vertical-stack
        cards:
          - type: conditional
            conditions:
              - entity: sensor.abfallkalender_gelbetonne_date
                state: '1'
            card:
              type: entities
              entities:
                - entity: sensor.thermometer_aussen_maximum
          - type: entities
            entities:
              - entity: sensor.thermometer_aussen_minimum
          - type: entities
            entities:
              - entity: sensor.thermometer_aussen_minimum

What version of Home Assistant Core has the issue?

core-2022.4.6

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Chrome, Vivaldi, etc.

Which operating system are you using to run this browser?

all

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[emufan]

Reason is, that in stack cards the first element has margin top 0px and bottom 4px. Every next hast margin top 4px and margin bottom 4px and last has margin top 4px and bottom 0px. (same with left and right for horizontal stack).

If it comes to the situation, that the first is hidden, the second is first and instead 0px top or bottom margin 4px from the next is used.

So 0px top / 0px bottom should be not set for first /last existing element, but for first/last visible element. Or to take it from DOM completeley, so the extsing rules, e.g. would be correct (again).

root > :first-child {
    margin-top: 0px;
}

Or ...

[ildar170975]

similar: https://github.com/home-assistant/frontend/issues/7292

[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.

[emufan]

Still valid and very ugly in conditional cases. I still wonder if this would not be better:

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]]

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]

Still the case.

[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.

[emufan]

Still the case.

[fwhitten]

Same problem here!

[twister36]

Just put all your conditional items in a horizontal stack (i.e. on the same row)... this will cause no vertical spacing like it would when you stack them vertically. Then use card-mod for each 2nd, 3rd to the left, and align the cards...

[ildar170975]

Just put all your conditional items in a horizontal stack (i.e. on the same row)... this will cause no vertical spacing like it would when you stack them vertically

But people want to stack cards vertically.

Then use card-mod

Ofc there are possible workarounds with card-mod. The point is to fix the issue in Frontend.

[Daniel-dev22]

I am surprised this is still an issue. I am seeing an issue with horizontal stack and a conditional card. It's causing the card within the conditional card to have less height than the other cards in the same horizontal stack.

I tried the suggested work around above for margin-top and bottom but it didn't work.

Does anyone have another work around I could try with card mod to resolve this card margin issue.