I’m enjoying using the decluttering card to help tidy up my new dashboard that I am working on, however I am having an issue trying to restrict the width of a vertical column of cards within the decluttering card template.
I have a ‘sidebar’ which is made up of custom button cards in a vertical column, which is contained in a decluttering template. This all looks fine on desktop, but smaller screen sizes like tablet, I would like the entire sidebar/column of button cards to shrink down to take up less width, however I seem to be coming up against an overriding 300px column width in my designated sidebar area. I am specifying 260px as the column width in my grid layout of my dashboard where the sidebar code resides, but the button cards all break out to the right of this 260px, as they are using a 300px width. In developer tools in my browser, if I untick ‘grid-auto-columns’ in the div id ‘#columns’ here:
grid-auto-columns: minmax(var(--column-width), var(--column-max-width));
then my vertical sidebar column shrinks down correctly and achieves the sort of size I am trying to achieve:
This is my decluttering_template/sidebar.yaml
sidebar:
card:
type: custom:layout-card
view_layout:
grid-area: sidebar
layout_type: vertical
card_mod:
style: |
:host {
background: transparent;
}
cards:
- type: custom:button-card
entity: sensor.time
show_name: false
show_icon: false
show_state: true
tap_action:
action: none
styles:
card:
- padding-top: 20px
- border-width: 0
- font-family: SF Pro Display, Roboto, system-ui
state:
- font-size: 4vw
- font-weight: 500
- line-height: var(--sidebar-time-line-height)
- text-align: center
- letter-spacing: 0.11vw
- color: rgba(255, 255, 255, 0.8)
card_mod:
style: |
/* phone */
@media screen and (max-width: 800px) {
ha-card {
display: none !important;
}
}
- type: custom:button-card
entity: sensor.date_formatted
show_name: false
show_icon: false
show_state: true
tap_action:
action: none
styles:
card:
- padding-top: 8px
- text-align: center
- border-width: 0
- font-family: SF Pro Display, Roboto, system-ui
state:
- font-size: 1.6vw
- white-space: unset
- font-weight: 300
- line-height: var(--sidebar-date-line-height)
- color: rgba(255, 255, 255, 0.8)
- text-align: center
card_mod:
style: |
/* phone */
@media screen and (max-width: 800px) {
#state {
font-size: 24px !important
}
}
- type: custom:gap-card
height: 30
# Navigation buttons (transparent sidebar)
- type: custom:button-card
name: Home
icon: mdi:home
tap_action:
action: navigate
navigation_path: /sidebar-replacement/home
styles:
grid:
- grid-template-areas: '"n i"'
- grid-template-columns: 1fr 100px
- align-items: center
# - height: 45px
name:
- font-size: 1.4em
- font-weight: 400
- justify-self: left
- padding: 0px 0px 0px 20px
card:
- aspect_ratio: 1/1
# - height: 45px
- border-radius: 12px
- box-shadow: none
- border: 0
- transition: background 0.3s ease, color 0.3s ease
- background: |
[[[
if (window.location.pathname === '/sidebar-replacement/home')
return 'rgba(0, 188, 212, 0.12)';
else
return 'transparent';
]]]
- color: |
[[[
if (window.location.pathname === '/sidebar-replacement/home')
return 'var(--sidebar-selected-text-color, #00bcd4)';
else
return 'rgba(255,255,255,0.8)';
]]]
card_mod:
style: |
ha-state-icon {
--mdc-icon-size: 24px !important;
width: 24px !important;
height: 24px !important;
padding: 0 !important;
margin: 0 !important;
}
- type: custom:button-card
name: Heating
icon: mdi:radiator
tap_action:
action: navigate
navigation_path: /sidebar-replacement/heating
styles:
grid:
- grid-template-areas: '"n i"'
- grid-template-columns: 1fr 100px
- align-items: center
- height: 45px
name:
- font-size: 1.4em
- font-weight: 400
- justify-self: left
- padding: 0px 0px 0px 20px
card:
- height: 45px
- border-radius: 12px
- box-shadow: none
- border: 0
- transition: background 0.3s ease, color 0.3s ease
- background: |
[[[
if (window.location.pathname === '/sidebar-replacement/heating')
return 'rgba(0, 188, 212, 0.12)';
else
return 'transparent';
]]]
- color: |
[[[
if (window.location.pathname === '/sidebar-replacement/heating')
return 'var(--sidebar-selected-text-color, #00bcd4)';
else
return 'rgba(255,255,255,0.8)';
]]]
card_mod:
style: |
ha-state-icon {
--mdc-icon-size: 24px !important;
width: 24px !important;
height: 24px !important;
padding: 0 !important;
margin: 0 !important;
}
- type: custom:button-card
name: Oil Tank
icon: mdi:oil
tap_action:
action: navigate
navigation_path: /sidebar-replacement/oil-tank
styles:
grid:
- grid-template-areas: '"n i"'
- grid-template-columns: 1fr 100px
- align-items: center
- height: 45px
name:
- font-size: 1.4em
- font-weight: 400
- justify-self: left
- padding: 0px 0px 0px 20px
card:
- height: 45px
- border-radius: 12px
- box-shadow: none
- border: 0
- transition: background 0.3s ease, color 0.3s ease
- background: |
[[[
if (window.location.pathname === '/sidebar-replacement/oil-tank')
return 'rgba(0, 188, 212, 0.12)';
else
return 'transparent';
]]]
- color: |
[[[
if (window.location.pathname === '/sidebar-replacement/oil-tank')
return 'var(--sidebar-selected-text-color, #00bcd4)';
else
return 'rgba(255,255,255,0.8)';
]]]
card_mod:
style: |
ha-state-icon {
--mdc-icon-size: 24px !important;
width: 24px !important;
height: 24px !important;
padding: 0 !important;
margin: 0 !important;
}
- type: custom:button-card
name: Weather
icon: mdi:weather-cloudy
tap_action:
action: navigate
navigation_path: /sidebar-replacement/weather
styles:
grid:
- grid-template-areas: '"n i"'
- grid-template-columns: 1fr 100px
- align-items: center
- height: 45px
name:
- font-size: 1.4em
- font-weight: 400
- justify-self: left
- padding: 0px 0px 0px 20px
card:
- height: 45px
- border-radius: 12px
- box-shadow: none
- border: 0
- transition: background 0.3s ease, color 0.3s ease
- background: |
[[[
if (window.location.pathname === '/sidebar-replacement/weather')
return 'rgba(0, 188, 212, 0.12)';
else
return 'transparent';
]]]
- color: |
[[[
if (window.location.pathname === '/sidebar-replacement/weather')
return 'var(--sidebar-selected-text-color, #00bcd4)';
else
return 'rgba(255,255,255,0.8)';
]]]
card_mod:
style: |
ha-state-icon {
--mdc-icon-size: 24px !important;
width: 24px !important;
height: 24px !important;
padding: 0 !important;
margin: 0 !important;
}
- type: custom:button-card
name: Car
icon: mdi:car
tap_action:
action: navigate
navigation_path: /sidebar-replacement/car
styles:
grid:
- grid-template-areas: '"n i"'
- grid-template-columns: 1fr 100px
- align-items: center
- height: 45px
card:
- height: 45px
- border-radius: 12px
- box-shadow: none
- border: 0
- transition: background 0.3s ease, color 0.3s ease
- background: |
[[[
if (window.location.pathname === '/sidebar-replacement/car')
return 'rgba(0, 188, 212, 0.12)';
else
return 'transparent';
]]]
- color: |
[[[
if (window.location.pathname === '/sidebar-replacement/car')
return 'var(--sidebar-selected-text-color, #00bcd4)';
else
return 'rgba(255,255,255,0.8)';
]]]
name:
- font-size: 1.4em
- font-weight: 400
- padding-left: 20px
- justify-self: start
card_mod:
style: |
ha-state-icon {
--mdc-icon-size: 24px !important;
width: 24px !important;
height: 24px !important;
padding: 0 !important;
margin: 0 !important;
}
- type: custom:button-card
name: Calendar
icon: mdi:calendar
tap_action:
action: navigate
navigation_path: /sidebar-replacement/calendar
styles:
grid:
- grid-template-areas: '"n i"'
- grid-template-columns: 1fr 100px
- align-items: center
- height: 45px
name:
- font-size: 1.4em
- font-weight: 400
- justify-self: left
- padding: 0px 0px 0px 20px
card:
- height: 45px
- border-radius: 12px
- box-shadow: none
- border: 0
- transition: background 0.3s ease, color 0.3s ease
- background: |
[[[
if (window.location.pathname === '/sidebar-replacement/calendar')
return 'rgba(0, 188, 212, 0.12)';
else
return 'transparent';
]]]
- color: |
[[[
if (window.location.pathname === '/sidebar-replacement/calendar')
return 'var(--sidebar-selected-text-color, #00bcd4)';
else
return 'rgba(255,255,255,0.8)';
]]]
card_mod:
style: |
ha-state-icon {
--mdc-icon-size: 24px !important;
width: 24px !important;
height: 24px !important;
padding: 0 !important;
margin: 0 !important;
}
and this is one of my views which uses the sidebar.yaml:
title: Sidebar Replacement
resources:
- url: /hacsfiles/sidebar-card/sidebar-card.js
type: module
button_card_templates: !include_dir_merge_named button_card_templates
decluttering_templates: !include_dir_merge_named decluttering_templates
kiosk_mode:
hide_sidebar: false
views:
# --------------------------------------------------
# HOME VIEW
# --------------------------------------------------
- type: custom:grid-layout
title: Home
path: home
layout:
margin: 0
grid-template-columns: 260px 1fr
grid-template-areas: |
"sidebar main"
grid-gap: 10px
padding: 10px 10px 10px 10px
mediaquery:
"(max-width: 800px)":
grid-template-columns: 1fr
grid-template-areas: |
"sidebar"
"main"
cards:
- type: custom:decluttering-card
template: sidebar
- type: markdown
view_layout:
grid-area: main
content: |
## Home
This is the **Home** page.
# --------------------------------------------------
# HEATING VIEW
# --------------------------------------------------
- type: custom:grid-layout
title: Heating
path: heating
layout:
margin: 0
grid-template-columns: 260px 1fr
grid-template-areas: |
"sidebar main"
grid-gap: 10px
padding: 10px 10px 10px 10px
mediaquery:
"(max-width: 800px)":
grid-template-columns: 1fr
grid-template-areas: |
"sidebar"
"main"
cards:
# ------------------------------
# SIDEBAR AREA (Transparent)
# ------------------------------
- type: custom:decluttering-card
template: sidebar
# ------------------------------
# MAIN DASHBOARD AREA
# ------------------------------
- type: custom:layout-card
view_layout:
grid-area: main
layout_type: custom:grid-layout
layout:
margin: 0
padding: 0 10px
width: 100%
box-sizing: border-box
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))
grid-gap: 10px
grid-template-areas: |
". . ."
"heating_status boost_all cancel_all"
"heading_up heading_up heading_up"
"ubedroom ubathroom office"
"heading_down heading_down heading_down"
"kitchen hallway livingroom"
"dbathroom dbedroom conservatory"
mediaquery:
#mobile#
"(max-width: 800px)":
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
grid-template-areas: |
"heating_status"
"boost_all"
"cancel_all"
"heading_up"
"ubedroom"
"ubathroom"
"office"
"heading_down"
"kitchen"
"hallway"
"livingroom"
"dbathroom"
"dbedroom"
"conservatory"
#tablet/laptop
"(min-width: 801px) and (max-width: 1600px)":
grid-template-columns: repeat(2, 1fr)
grid-template-areas: |
"heating_status heating_status"
"boost_all cancel_all"
"heading_up heading_up"
"ubedroom ubathroom"
"office ."
"heading_down heading_down"
"kitchen hallway"
"livingroom dbathroom"
"dbedroom conservatory"
cards:
# ---- STATUS / CONTROL ROW ----
- type: custom:button-card
view_layout:
grid-area: heating_status
entity: sensor.wiser_boiler
name: Heating
icon: mdi:radiator
show_state: true
styles:
card:
- height: 80px
- border-radius: 12px
- padding: 10px
name:
- font-size: clamp(10px, 2vw, 16px)
- font-weight: bold
state:
- font-size: clamp(12px, 2vw, 16px)
state:
- value: 'On'
styles:
card:
- background-color: '#FF5722'
- color: white
card_mod:
style: |
ha-card {
max-width: 50% !important;
margin: auto;
}
etc.....
Can anyone help to guide me on how to target this column width correctly, and then I can apply and adjust this accordingly via media query for different sizes of screens. Thanks in advance!