How do i use a display:none css command for layout card.??
I just started my dashboard. Below is my code which has chips.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 120px auto 120px
grid-template-rows: auto
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: alarm-control-panel
entity: alarm_control_panel.home_212_alarm
content_info: none
name: Alarm
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:washing-machine
icon_color: |
{% if is_state(entity, 'off') %}
disabled
{% else %}
teal
{% endif %}
entity: switch.gf_br01_fan1
- type: template
icon: mdi:washing-machine
icon_color: |
{% if is_state(entity, 'off') %}
disabled
{% else %}
brown
{% endif %}
entity: switch.washing_machine
tap_action:
action: none
alignment: center
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
{{ 'animation: shake 400ms ease-in-out infinite;' if is_state('switch.washing_machine', 'on') }}
transform-origin: 50% 58%;
-webkit-clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
mushroom-template-chip:nth-child(2)$: |
mushroom-chip {
cursor: default !important;
}
ha-icon {
position: absolute;
left: -31.5px;
bottom: 6px;
{{ 'animation: spin 1s linear infinite;' if is_state('switch.washing_machine', 'on') }}
transform-origin: 50% 58%;
-webkit-clip-path: circle(21.7% at 50% 58%);
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.: |
.chip-container :nth-child(2) {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
width: 0px;
margin-left: calc(-1 * var(--chip-spacing));
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.persons_home_count
icon: mdi:account-group
icon_color: |
{% if is_state(entity, '0') %}
red
{% else %}
blue
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card:after {
content: "{{ states('sensor.persons_home_count') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -7px;
right: -2px;
width: 17px;
height: 17px;
font-size: 13px;
}
- type: template
entity: lock.front_door
icon: >-
{{ 'mdi:lock' if is_state('lock.front_door', 'locked') else
'mdi:lock-open' }}
icon_color: '{{ ''green'' if is_state(''lock.front_door'', ''locked'') else ''red'' }}'
content: null
tap_action:
action: more-info
alignment: end
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-rows: auto
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: switch.all_power_strips_group
state: 'on'
chip:
type: template
entity: sensor.powerstrips_on_count
icon: mdi:lightbulb-on
icon_color: |
{% if is_state(entity, '0') %}
disabled
{% else %}
orange
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card:after {
content: '{{ states('sensor.powerstrips_on_count') }}';
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -7px;
right: -2px;
width: 17px;
height: 17px;
font-size: 13px;
}
- type: conditional
conditions:
- entity: switch.all_fans_group
state: 'on'
chip:
type: template
entity: sensor.fans_on_count
icon: mdi:fan
icon_color: |
{% if is_state(entity, '0') %}
disabled
{% else %}
teal
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card:after {
content: "{{ expand(states.switch.all_fans_group) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -7px;
right: -2px;
width: 17px;
height: 17px;
font-size: 13px;
}
alignment: start
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-icon {
{% if states('sensor.powerstrips_on_count') != '0' %}
{{ 'animation: illumination 1.75s infinite;' }}
{% endif %}
}
@keyframes illumination {
0%, 100% { -webkit-clip-path: inset(0 0 0 0);}
80% { -webkit-clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%);}
}
mushroom-conditional-chip:nth-child(2):
mushroom-template-chip$: |
ha-icon {
{% if states('sensor.fans_on_count') != '0' %}
{{ 'animation: spin 2s ease-in, spin 1s linear 2s infinite, spin ease-out;' }}
{% endif %}
}
@keyframes spin {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg); }
}
.: |
mushroom-conditional-chip {
height: calc(var(--chip-height));
}
:host {
--ha-card-background: var(--card-background-color);
}
The first row is all permanent chips inside a layout card
The second row has conditional chips inside a layout card.
When all the conditions are false, there are no chips in the second row.
But it causes the gap to increase at the bottom part of the card.
if i use the developer option in the browser and add a display:none to the layout card, then the problem is solved.
how can i add this css with a conditional checkā¦ Like if there are no visible conditional chips, then the css display:none should be applied to the layout card. If any one chip is active, then the layout card should be visible.
I tried lot of thingsā¦ went through the dense dark forests 
ā¦ butā¦ 
This is the best that i could findā¦
https://stackoverflow.com/questions/12206935/is-there-a-css-haschildren-selector
can you help me do this.
.
