New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Gap in stack cards, when using conditional card and condition is false #12374
Comments
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).
Or ... |
similar: #7292 |
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. |
Still valid and very ugly in conditional cases. I still wonder if this would not be better:
|
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. |
Still the case. |
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. |
Still the case. |
Same problem here! |
But people want to stack cards vertically.
Ofc there are possible workarounds with card-mod. |
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. |
Checklist
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
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
The text was updated successfully, but these errors were encountered: