Thanks. Iâll try this. And everything âonlyâ, because of the margins of invisible conditional content (your and my issue in issue list).
No custom:layout-break
is not helping. What a pity.
Until someone has further ideas (or at least some ideas about the âwhyâ, I make it via themes
card-mod-view-yaml: |
hui-masonry-view $ div#columns div.column hui-vertical-stack-card $: |
#root hui-conditional-card:nth-child(2) {
{% if (states("binary_sensor.ui_alert") == "off") %}
margin-top: 0px;
{% endif %}
}
I got rid of these conditional rows/cards because of that margin)))
Replaced by card_mod or state-switch card.
Give me a minimized code for the problem.
type: vertical-stack
cards:
- type: conditional
conditions:
- entity: binary_sensor.ui_alert
state: 'on'
card:
type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: conditional
conditions:
- entity: input_boolean.alert_xxx
state: 'on'
card:
type: custom:button-card
[...]
- type: conditional
conditions:
- entity: input_boolean.alert_xxx_fallig
state: 'on'
card:
type: custom:button-card
[...]
[etc]
- type: conditional
conditions:
- entity: binary_sensor.dwd_wetterwarnung_aktiv
state: 'on'
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:button-card
[...]
- type: markdown
[...]
- type: weather-forecast
So three âsectionsâ A, B and C. If A and B are hidden, C has a top-margin which is not wanted. As it is a weather card, I can mod it. If Only A is hidden, B has an unwanted top-marging as well, but this is a conditional-card, which I cannot mod. And with mod-card the problem above.
But the one with theme hacking is working indeed as work-around.
@arganto
Check this:
title: test-test-0
path: test-test-0
badges: []
# type: custom:horizontal-layout
cards:
- type: entities
entities:
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean_2
- entity: input_boolean.test_boolean_3
- entity: input_boolean.test_boolean_4
- type: button
entity: sun.sun
name: button before the stack
- type: custom:mod-card
card_mod:
style:
hui-vertical-stack-card $: |
div#root :nth-child(2) {
{% if is_state("input_boolean.test_boolean","off") %}
margin-top: 0px;
{% endif %}
}
div#root :nth-child(3) {
{% if is_state("input_boolean.test_boolean_4","off") %}
margin-top: 0px;
{% endif %}
}
card:
type: vertical-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: 'on'
card:
type: custom:stack-in-card
title: "test_boolean = ON"
mode: horizontal
cards:
- type: conditional
conditions:
- entity: input_boolean.test_boolean_2
state: 'on'
card:
type: custom:button-card
entity: person.ildar
name: "test_boolean_2 = ON"
- type: conditional
conditions:
- entity: input_boolean.test_boolean_3
state: 'on'
card:
type: custom:button-card
entity: zone.home
name: "test_boolean_3 = ON"
- type: conditional
conditions:
- entity: input_boolean.test_boolean_4
state: 'on'
card:
type: custom:stack-in-card
title: "test_boolean_4 = ON"
cards:
- type: custom:button-card
entity: sun.sun
- type: markdown
content: aaaaaaa
- type: weather-forecast
entity: weather.home_met
- type: button
entity: sun.sun
name: button after the stack
- Replaced
vertical-stack-in-card
withstack-in-card
(not using the 1st). - Margins for any cards in stack may be changed from the outer stackâs level (like it was proposed in your card-mod-theme example).
- Note the
div#root :nth-child(....)
using. - Top margins are fixed by card-mod, top cards are horizontally aligned.
Regarding the âcards sticking togetherâ problem.
It presents.
Here the vertical-stack is surrounded by âpicture
â cards - the stack is sticked to the next card:
If mod-card is removed - no sticking:
How to fix - use layout-card:
title: test-test-0
path: test-test-0
badges: []
type: custom:vertical-layout
cards:
...
- type: custom:layout-break
- type: custom:mod-card
....
- type: custom:layout-break
...
Perfect. I first thought for this I would need to install https://github.com/thomasloven/lovelace-badge-card first (which I didnât know it exists before). In the end, using your snippetâŚ
.badge-container .label-badge .value::after {
content: "my UoM";
background-color: var(--ha-label-badge-color, var(--primary-color));
color: var(--ha-label-badge-label-color, white);
border-radius: 1em;
padding: 9% 16% 8%;
font-weight: 500;
overflow: hidden;
position: absolute;
bottom: -1em;
left: -0.2em;
right: -0.2em;
line-height: 1.05em;
font-size: 0.5em;
}
âŚalso works without having https://github.com/thomasloven/lovelace-badge-card installed. But good to know itâs possible to place badges everywhere. So thank you twice (for a factory solution with card-mod and for indirectly pointing me to another of Thomasâ great pieces of software)
But I must advise once again:
I can not make this work. I think itâs because your setup is having troubles together with the :host part I use.
Please see my code: So currently
- entity: sensor.problems_any
name: Probleme
icon: mdi:check-circle
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border-radius: 20% !important;
}
.badge-container .label-badge .value::after {
{% if is_state('sensor.problems_any','1') %}
content: "{{states(config.entity)}}";
{% endif %}
}
.: |
ha-label-badge ha-state-icon {
{% if is_state('sensor.problems_any','0') %}
display: none;
{% endif %}
}
:host {
{% if states(config.entity) | int(0) == 0 -%}
--label-badge-text-color: green;
--label-badge-red: green;
{% else %}
color: red;
--label-badge-text-color: red;
--label-badge-red: red;
--label-badge-background-color: yellow;
{% endif %}
}
gives
-
when sensor value is 0 ==> exactly what I want, perfect!
-
when sensor value is 1 ==> here I still have the icon shown together with the value. How to get rid of the icon?
I got you. But there are sensors which donât have (and canât have) one, e. g. âzone.homeâ.
So by simply using your styling I am able to write âpersonsâ on the label badge. Perfect
Compare my original code and yours - wrong indentation.
I fixed it. But now thisâŚ
- entity: sensor.problems_any
name: Probleme
icon: mdi:check-circle
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border-radius: 20% !important;
}
.badge-container .label-badge .value::after {
{% if is_state('sensor.problems_any','1') %}
content: "{{states(config.entity)}}";
{% endif %}
}
.: |
ha-label-badge ha-state-icon {
{% if is_state('sensor.problems_any','0') %}
display: none;
{% endif %}
}
:host {
{% if states(config.entity) | int(0) == 0 -%}
--label-badge-text-color: green;
--label-badge-red: green;
{% else %}
color: red;
--label-badge-text-color: red;
--label-badge-red: red;
--label-badge-background-color: yellow;
{% endif %}
}
âŚshows:
-
when value is 0 (error: icon missing)
-
when value is 1 (error: icon shown)
So: it got even worse.
No, wrong.
Copy/paste my code and then ADD yours.
I did! A second time. Step by step. Same result, believe me.
I would be thankful if you could take what I added to show me it works.
Last version (copy / pasted yours, added my stuff):
- entity: sensor.problems_any
name: Probleme
icon: mdi:check-circle
card_mod:
style:
ha-state-label-badge $:
ha-label-badge $: |
.badge-container .label-badge {
border-radius: 20% !important;
}
.badge-container .label-badge .value::after {
{% if is_state('sensor.problems_any','1') %}
content: "{{states(config.entity)}}";
{% endif %}
}
.: |
ha-label-badge ha-state-icon {
{% if is_state('sensor.problems_any','0') %}
display: none;
{% endif %}
}
:host {
{% if states(config.entity) | int(0) == 0 -%}
--label-badge-text-color: green;
--label-badge-red: green;
{% else %}
color: red;
--label-badge-text-color: red;
--label-badge-red: red;
--label-badge-background-color: yellow;
{% endif %}
}
Wrong indentation for the :host:
.: |
:host {
The â.:â must be with the same indent as your 1st selector
With the 3.1.5 update my card doesnât work properly anymore. So when the light is on in a room it changes the icon color. I see that there is a fix for the icon colors, but itâs not really clear what or what I should change. Any help or tips?
type: custom:button-card
template: kamer_info
icon: mdi:baby-carriage-off
color: rgb(0, 51, 153)
name: Kinderkamer
variables:
climate_entity: climate.kinderkamer
tap_action:
action: navigate
navigation_path: /lovelace-mobile/kinderkamer-mob
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if is_state('light.kinderkamer1', 'on') %}
rgb(255,190,0)
{% elif is_state('light.kinderkamer2', 'on') %}
rgb(255,190,0)
{% elif is_state('light.nachtlicht_kinderkamer', 'on') %}
rgb(255,190,0)
{% else %}
rgb(0, 51, 153)
{% endif %}
}
Thanks for your effort. The problem with the margins were not the problem. I did it more ore less 1:1 before. The problem was âonlyâ the sticking when using mod-card to get rid of the first margin. And as this is present here as well and I donât want to switch to an custom-layout card (did it with horizontal (with assigned comlumn, etc.) already before, but I donât like, that it is not loading in a streaming way card by card but load everything first and show clack/background until it then appears.
card-mod-view-yaml: |
hui-masonry-view $ div#columns div.column hui-vertical-stack-card $: |
#root hui-conditional-card:nth-child(2) {
{% if (states("binary_sensor.ui_alert") == "off") %}
margin-top: 0px;
{% endif %}
}
This one was the clue ⌠if you only have one dashboard. Later I saw, that if you go to another dashboard and back, etc. this mod getâs lost and will not be re-apllied. For whatever reason. So, no real solution, but interesting to know.
And then I though. Why not having a vartical stack as the build in, but with an ha-card (really a pitty, that so many helper-cards in HA are build different than all other cards). Like vertical-stack-in-card or stack-in-card. But tweek it that way, that it looks like tthe build in card, that means re-assign the backgrounds, etc.
This is possible with both cards, bat faster (and with less custom modding) with stack-in-card, because of the keep-objekt. Et voila:
type: custom:stack-in-card
card_mod:
style:
hui-vertical-stack-card$: |
div#root { background-color: red; }
keep:
background: true
margin: true
outer_padding: false
border_radius: true
box_shadow: true
cards:
No sticking. Behavior like in standard card. Order of cards same. Most probably only until I will see or find another problem with this approach, but it looks promising. And with that I can mod the margins as I want.
BTW Ma assumption, why they stick together is, that the mod-card is calculated by HA as 0px height and therefor more or less not existent for the masonry positioning of the cards. So calculation of the break to the next column will start with the next card. Something like that I think.
Fixed this. So Iâm back from two bugs to one:
value = 0:
â right
value = 1:
â WRONG!
For the 3rd time: how to get rid of the icon when value = 1?
Maybe you want to just try it on your own? All the theoretical looking & directing âwithout touchingâ is not very effective
- entity: sensor.problems_any
name: Probleme
icon: mdi:check-circle
card_mod:
style:
ha-state-label-badge $:
ha-label-badge $: |
.badge-container .label-badge {
border-radius: 20% !important;
}
.badge-container .label-badge .value::after {
{% if is_state('sensor.problems_any','1') %}
content: "{{states(config.entity)}}";
{% endif %}
}
.: |
ha-label-badge ha-state-icon {
{% if is_state('sensor.problems_any','0') %}
display: none;
{% endif %}
}
:host {
{% if states(config.entity) | int(0) == 0 -%}
--label-badge-text-color: green;
--label-badge-red: green;
{% else %}
color: red;
--label-badge-text-color: red;
--label-badge-red: red;
--label-badge-background-color: yellow;
{% endif %}
}
I have already tested it and pointed to the problem with indentation for :host.
You did not corrected it.
For the sake of completes: I switched to vertical-stack-in-card and removed stack-in-card as well completely, because this would be one of the few places for the stack-in-card and I prefer to have only one of these types.
type: custom:vertical-stack-in-card
card_mod:
style:
.: |
ha-card { background-color: red; }
div hui-entities-card:nth-child(2) $: |
ha-card {
margin-top: 4px;
}
styles:
border-radius: var(--ha-card-border-radius, 4px)
box-shadow: >-
var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px
0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) )
Reason: The vertical-stack-in-card has fewer problems with stacks inside stacks (a popup with this construction is not working), some button cards were not displayed, etc. etc.