Im going to use the Tab Card to display my room cards on the home page, however i cant figure out why the first Tab is cutting off the bottom row of chips. Both tabs are identical??
type: custom:tabbed-card
tabs:
- card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Driveway/Garage
secondary: >-
{{ states('sensor.internal_garage_door_sensor_temperature')}}°C | {{
states('sensor.')}}%
icon: phu:rooms-carport
tap_action:
action: navigate
navigation_path: ''
layout: vertical
icon_color: '{{ ''blue'' if is_state(entity, ''off'') else ''disabled'' }}'
fill_container: true
hold_action:
action: toggle
double_tap_action:
action: more-info
entity: light.area_garage_lights_group
card_mod:
style:
mushroom-shape-icon$: >
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
--shape-color: rgba(var(--rgb-{{ 'orange' if
is_state('light.area_garage_lights_group', 'on') else 'disabled'
}}), 0.3) !important;
clip-path: inset(0 0 0 0);
}
.: |
mushroom-shape-icon {
position: absolute;
--icon-size: 230px;
top: -85px;
left: -270px; }
mushroom-state-item {
text-align: center;
transform: translateX(0%);
}
ha-card {
clip-path: inset(0 0 0 0);
height: 120px !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.garage_light_switch
icon_color: |-
{% set state=states('light.garage_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
double_tap_action:
action: none
icon: mdi:lightbulb-fluorescent-tube
tap_action:
action: more-info
hold_action:
action: none
- type: template
entity: light.garage_nook_light_switch
icon_color: |-
{% set state=states('light.garage_nook_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
double_tap_action:
action: none
icon: phu:recessed-ceiling
tap_action:
action: more-info
hold_action:
action: none
- type: template
entity: binary_sensor.garage_door_sensor
icon_color: |-
{% set state=states('binary_sensor.garage_door_sensor') %}
{% if state=='on' %}
blue
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:garage-variant
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: binary_sensor.garage_motion_sensor_group
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
icon: mdi:motion-sensor
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: binary_sensor.back_garage_door_sensor_contact
icon_color: >-
{% set
state=states('binary_sensor.back_garage_door_sensor_contact')
%}
{% if state=='on' %}
blue
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:door
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: binary_sensor.internal_garage_door_sensor
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
icon: mdi:door
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: camera.driveway_camera
icon_color: >-
{% set state=states('binary_sensor.driveway_camera_motion')
%}
{% if state=='on' %}
blue
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:cctv
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: sensor.solarnet_inverter_utilisation
icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
icon: mdi:home-lightning-bolt-outline
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: switch.ducted_vacuum_cleaner_plug
icon: mdi:vacuum
icon_color: >-
{% set state=states('sensor.ducted_vacuum_wattage_status')
%}
{% if state=='Off' %}
disabled
{% elif state=='On' %}
purple
{% endif %}
card_mod:
style: |
ha-card {
margin-top: 10px;
margin-bottom: 3px;
margin-left: 3px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
attributes:
icon: mdi:sofa-single
- card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Driveway/Garage
secondary: >-
{{ states('sensor.internal_garage_door_sensor_temperature')}}°C | {{
states('sensor.')}}%
icon: phu:rooms-carport
tap_action:
action: navigate
navigation_path: ''
layout: vertical
icon_color: '{{ ''blue'' if is_state(entity, ''off'') else ''disabled'' }}'
fill_container: true
hold_action:
action: toggle
double_tap_action:
action: more-info
entity: light.area_garage_lights_group
card_mod:
style:
mushroom-shape-icon$: >
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
--shape-color: rgba(var(--rgb-{{ 'orange' if
is_state('light.area_garage_lights_group', 'on') else 'disabled'
}}), 0.3) !important;
clip-path: inset(0 0 0 0);
}
.: |
mushroom-shape-icon {
position: absolute;
--icon-size: 230px;
top: -85px;
left: -270px; }
mushroom-state-item {
text-align: center;
transform: translateX(0%);
}
ha-card {
clip-path: inset(0 0 0 0);
height: 120px !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.garage_light_switch
icon_color: |-
{% set state=states('light.garage_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
double_tap_action:
action: none
icon: mdi:lightbulb-fluorescent-tube
tap_action:
action: more-info
hold_action:
action: none
- type: template
entity: light.garage_nook_light_switch
icon_color: |-
{% set state=states('light.garage_nook_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
double_tap_action:
action: none
icon: phu:recessed-ceiling
tap_action:
action: more-info
hold_action:
action: none
- type: template
entity: binary_sensor.garage_door_sensor
icon_color: |-
{% set state=states('binary_sensor.garage_door_sensor') %}
{% if state=='on' %}
blue
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:garage-variant
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: binary_sensor.garage_motion_sensor_group
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
icon: mdi:motion-sensor
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: binary_sensor.back_garage_door_sensor_contact
icon_color: >-
{% set
state=states('binary_sensor.back_garage_door_sensor_contact')
%}
{% if state=='on' %}
blue
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:door
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: binary_sensor.internal_garage_door_sensor
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
icon: mdi:door
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: camera.driveway_camera
icon_color: >-
{% set state=states('binary_sensor.driveway_camera_motion')
%}
{% if state=='on' %}
blue
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:cctv
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: sensor.solarnet_inverter_utilisation
icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
icon: mdi:home-lightning-bolt-outline
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: switch.ducted_vacuum_cleaner_plug
icon: mdi:vacuum
icon_color: >-
{% set state=states('sensor.ducted_vacuum_wattage_status')
%}
{% if state=='Off' %}
disabled
{% elif state=='On' %}
purple
{% endif %}
card_mod:
style: |
ha-card {
margin-top: 10px;
margin-bottom: 3px;
margin-left: 3px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
attributes:
icon: mdi:sofa-single
First Tab
Second Tab
