Ltek
May 28, 2025, 2:54am
1
Layout card looks super powerful, but also very complex. I’m not getting it work work the way I need. (yaml code on pastesio )
thx for the help!
Use Case : mobile devices
Goals…
1st row, 1st column : contains the custom-buttons to set the entity for the conditionals
1st row, 2nd column : controls for the shade_group (based on the conditional set)
2nd row : scrolls independently of the rest of the screen/page. Shows individual shade controls (based on the conditional set)
If you have done, or seen, some examples please point to the code… I learn best by seeing example code. thank you!
mirekmal
May 28, 2025, 7:19am
2
I’d use custom layout card instead, as it makes defining cards position within dashboard more flexible and has tons of customization options. The the code would be:
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: 50% 50% # defines columns width, can use fr, px, % or auto
grid-template-rows: auto auto # defines row heigth, can use px or auto (not sure about % and fr)
grid-template-areas: |
"1 2" # in first row you have 2 cells defined, called 1 and 2, any distinctive name can be used
"3 3" # in second row you have 1 cell defined, that spans across 2 columns
cards:
- type: card 1 # here the first card goes, anything you want
view_layout:
grid-area: 1 # this defines where the card will be placed within the grin, in this case cell named 1
card content
- type: card 2
view_layout:
grid-area: 2
card content
- type: card 3
view_layout:
grid-area: 3
card content
Bonus: for more advanced setup you can also use mediaquery to define different grid layouts for different screen sizes, so you can use one dashboard for regular screens and mobiles, that will adjust layout depending on what device is used to display it.
2 Likes
Ltek
May 28, 2025, 1:01pm
3
mirekmal:
grid-template-columns: 50% 50% # defines columns width, can use fr, px, % or auto
grid-template-rows: auto auto # defines row heigth, can use px or auto (not sure about % and fr)
grid-template-areas: |
"1 2" # in first row you have 2 cells defined, called 1 and 2, any distinctive name can be used
"3 3" # in second row you have 1 cell defined, that spans across 2 columns
thank you, that helped a lot… template-areas was what I was not getting right in my code.
Ideally, the 1st row would always be onscreen as 2 columns, and the 2nd row would scroll independently so show all 4 columns.
Also, its still squashing the cells in the 2nd row on only the phone.
here’s the tablet (works as expected)…
here’s the phone, notice the shade image is missing. This only happens with a set of 4 shades, when there are 2, it works perfectly. How it looks…
When I force a specific width to try to make it always show the shade image, it expands the cells too much if there are only 2 cells – they will fill the 4 columns instead of staying as 2 columns
grid-template-columns: 220px 220px 220px 220px
mirekmal
May 28, 2025, 1:29pm
4
mirekmal:
grid-template-columns: 50% 50% # defines columns width, can use fr, px, % or auto
grid-template-rows: auto auto # defines row heigth, can use px or auto (not sure about % and fr)
grid-template-areas: |
"1 2" # in first row you have 2 cells defined, called 1 and 2, any distinctive name can be used
"3 3"
Or change this code to:
grid-template-columns: 25% 25% 25% 25%
grid-template-rows: auto auto # defines row heigth, can use px or auto (not sure about % and fr)
grid-template-areas: |
"1 1 2 2"
"3 4 5 6"
and put you shade cards to cells 3 to 6…
Ltek
May 28, 2025, 5:08pm
5
@mirekmal
with you and some AI, and 3 hours trying different things, I’m almost there.
I have it all working except 1 thing… how to make Row 2 scroll, while Row 1 stays static; cant find info on this?
mirekmal
May 29, 2025, 6:08am
6
I do not think it is possible. Perhaps with some card mod and CSS tweaking? I was also in search for creation of non scrollable part of dashboard, but never found the solution
@mirekmal Take a look at the CSS command overflow: specifically overflow-y:
@Ltek Here is a simple example.
type: custom:enhanced-shutter-card
entities:
- entity: cover.xxxxxxx
name: Bed Curtains
- entity: cover.yyyyyyy
name: TV Curtains
card_mod:
style: |
ha-card {
height: 200px;
overflow-y: scroll;
}
mirekmal
May 29, 2025, 7:35am
8
Perhaps it works with selected cards. I just tried to use it on huge vertical stack and it only clips the content to given height, but soe not scroll content. Here is the code I used:
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
height: 500px;
overflow: scroll;
}
cards:
- type: entities
entities:
- input_select.uptimekuma_period
- type: custom:text-divider-row
text: OVERALL AVAILABILITY
- type: custom:decluttering-card
template: uptime
variables:
- entity: sensor.uptimekuma_192_168_52_21
- type: custom:text-divider-row
text: NETWORK
- type: custom:decluttering-card
template: uptime
variables:
- entity: sensor.uptimekuma_mirekmal_dns
- type: custom:decluttering-card
template: uptime
variables:
- entity: sensor.uptimekuma_cable_modem
. . . # entire list contains ~80 card like one above for monitored entities
The code causes entire stack to be clipped and static, not scrolling the content.
Interestingly, if I replace custom stack with native one it is even not clipped…
It’s not overflow: scroll; it is overflow-y: scroll !important;
What do you get with this?
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
height: 200px;
overflow-y: scroll !important;
}
cards:
- type: entities
entities:
- input_select.uptimekuma_period
- type: entities
entities:
- input_select.uptimekuma_period
- type: entities
entities:
- input_select.uptimekuma_period
- type: entities
entities:
- input_select.uptimekuma_period
overflow: scroll will add both horizontal and vertical scrollbars. Adding !important will force the CSS mod
mirekmal
May 29, 2025, 9:11am
10
Ha! Apparently !important was important
1 Like
Ltek
May 29, 2025, 1:27pm
11
I tried that an has found a few issues…
must use “custom: stack-in-card”; the built-in “horizontal-stack” doesnt work.
I see scroll bars when on my PC’s large-screen (not sure why since they cannot be used, are not needed) but no scroll bars are on my phone screen (where they are very needed)
the stack-in-card is always panning the 4 columns, even when it only needs 2 columns since only 2 entities are defined. this will force a scroll bar to always show, and simply looks bad too.
full YAML here
hoping you might have some solutions? thanks for the help!
mirekmal
May 30, 2025, 7:57am
12
One more hint, I found, regarding vertical sizing of scrollable area, to dynamically adjust size while resizing browser window:
card_mod:
style: |
ha-card {
overflow-y: scroll !important;
height: calc(100vh - 230px);
This takes total heigth of browsing area (100vh) ans substracts heigth on non scrollable part of screen/header (230px) to calculate size of scrollable part of window.
Ltek
May 30, 2025, 12:31pm
13
I cant get the horizonal scroll to work on mobile at all… it just is the normal swipe, moving then entire screen, not the inset/wrapper area. Its unfortunate that the dashboard is so capable but such a hack of multiple things even just to get basic layouts like I’m trying to do. If dashboards were simply 100% standard HTML/CSS with embedded calls to HA objects we could have simply used a standard web editor to create dashboards with 100x less trouble.
Ltek
June 1, 2025, 1:07am
14
dashboard layouts are a serious nightmare… grid-layout doesnt work the way the docs say in the CSS docs.
I have tried using multiple methods to SIMPLY get this YAML to have 4 columns, and the first two items in Row 1, Columns 1 & 2 (leave 3 & 4 empty)
it doesnt work.
type: custom:grid-layout
icon: mdi:roller-shade
path: shades-scroll
title: Shades-scroll
layout:
grid-gap: 0px
grid-template-columns: 190px 190px 190px 190px
grid-template-rows: auto auto
grid-template-areas: |
"B B G G"
"C1 C2 C3 C4"
cards:
# Left column buttons (spanning both rows)
- type: vertical-stack
view_layout:
grid-column: B
cards:
- type: custom:button-card
name: Kitchen
entity: input_select.shades_group_display_selector
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.shades_group_display_selector
option: Kitchen
state:
- value: Kitchen
styles:
card:
- background-color: var(--primary-color)
styles:
card:
- padding: 8px
- font-weight: normal
- font-size: 18px
- justify-content: center
- text-align: center
- border-radius: 8px
- type: custom:button-card
name: Living Room
entity: input_select.shades_group_display_selector
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.shades_group_display_selector
option: Living Room
state:
- value: Living Room
styles:
card:
- background-color: var(--primary-color)
styles:
card:
- padding: 8px
- font-weight: normal
- font-size: 18px
- justify-content: center
- text-align: center
- border-radius: 8px
- type: custom:button-card
name: Play Room
entity: input_select.shades_group_display_selector
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.shades_group_display_selector
option: Play Room
state:
- value: Play Room
styles:
card:
- background-color: var(--primary-color)
styles:
card:
- padding: 8px
- font-weight: normal
- font-size: 18px
- justify-content: center
- text-align: center
- border-radius: 8px
- type: custom:button-card
name: Master Bedroom
entity: input_select.shades_group_display_selector
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.shades_group_display_selector
option: Master Bedroom
state:
- value: Master Bedroom
styles:
card:
- background-color: var(--primary-color)
styles:
card:
- padding: 8px
- font-weight: normal
- font-size: 18px
- justify-content: center
- text-align: center
- border-radius: 8px
- type: custom:button-card
name: Master Bathroom
entity: input_select.shades_group_display_selector
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.shades_group_display_selector
option: Master Bathroom
state:
- value: Master Bathroom
styles:
card:
- background-color: var(--primary-color)
styles:
card:
- padding: 8px
- font-weight: normal
- font-size: 18px
- justify-content: center
- text-align: center
- border-radius: 8px
- type: custom:button-card
name: Guest Bedroom
entity: input_select.shades_group_display_selector
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.shades_group_display_selector
option: Guest Bedroom
state:
- value: Guest Bedroom
styles:
card:
- background-color: var(--primary-color)
styles:
card:
- padding: 8px
- font-weight: normal
- font-size: 18px
- justify-content: center
- text-align: center
- border-radius: 8px
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
box-shadow: none !important;
}
# Kitchen Cards
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Kitchen
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.kitchen_shade_group
name: All in Room
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #FF5733 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: G
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Kitchen
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shades_kitchen_tuya_ts0601_cover_1
name: Shade 1
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.shades_kitchen_tuya_ts0601_cover_1_battery
signal_entity: sensor.shades_kitchen_tuya_ts0601_cover_1_linkquality
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #FF5733 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C1
grid-row: 2
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Kitchen
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shades_kitchen_tuya_ts0601_cover_2
name: Shade 2
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.shades_kitchen_tuya_ts0601_cover_2_battery
signal_entity: sensor.shades_kitchen_tuya_ts0601_cover_2_linkquality
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #FF5733 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C2
grid-row: 2
# Living Room Cards
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Living Room
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.living_room_shade_group
name: All in Room
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #33FF57 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: G
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Living Room
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shades_living_room_tuya_ts0601_cover_1
name: Shade 1
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.shades_living_room_tuya_ts0601_cover_1_battery
signal_entity: sensor.shades_living_room_tuya_ts0601_cover_1_linkquality
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #33FF57 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C1
grid-row: 2
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Living Room
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shades_living_room_tuya_ts0601_cover_2
name: Shade 2
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.shades_living_room_tuya_ts0601_cover_2_battery
signal_entity: sensor.shades_living_room_tuya_ts0601_cover_2_linkquality
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #33FF57 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C2
grid-row: 2
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Living Room
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shades_living_room_tuya_ts0601_cover_3
name: Shade 3
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.shades_living_room_tuya_ts0601_cover_3_battery
signal_entity: sensor.shades_living_room_tuya_ts0601_cover_3_linkquality
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #33FF57 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C3
grid-row: 2
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Living Room
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shades_living_room_tuya_ts0601_cover_4
name: Shade 4
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.shades_living_room_tuya_ts0601_cover_4_battery
signal_entity: sensor.shades_living_room_tuya_ts0601_cover_4_linkquality
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #33FF57 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C4
grid-row: 2
# Play Room Cards
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Play Room
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.playroom_shade_group
name: All in Room
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #3357FF !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: G
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Play Room
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shade_playroom1
name: Shade 1
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_playroom1
signal_entity: sensor.somfy_shade_rssi_playroom1
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #3357FF !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C1
grid-row: 2
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Play Room
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shade_playroom2
name: Shade 2
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_playroom2
signal_entity: sensor.somfy_shade_rssi_playroom2
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #3357FF !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C2
grid-row: 2
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Play Room
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shade_playroom3
name: Shade 3
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_playroom3
signal_entity: sensor.somfy_shade_rssi_playroom3
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #3357FF !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C3
grid-row: 2
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Play Room
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shade_playroom4
name: Shade 4
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_playroom4
signal_entity: sensor.somfy_shade_rssi_playroom4
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #3357FF !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C4
grid-row: 2
# Master Bedroom Cards
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Master Bedroom
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.master_bedroom_shade_group
name: All in Room
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #33FFF0 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: G
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Master Bedroom
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_masterbed1
name: Shade 1
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_master_bedroom_1
signal_entity: sensor.somfy_shade_rssi_master_bedroom_1
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #33FFF0 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C1
grid-row: 2
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Master Bedroom
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_masterbed2
name: Shade 2
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_master_bedroom_2
signal_entity: sensor.somfy_shade_rssi_master_bedroom_2
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #33FFF0 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C2
grid-row: 2
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Master Bedroom
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_masterbed3
name: Shade 3
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_master_bedroom_3
signal_entity: sensor.somfy_shade_rssi_master_bedroom_3
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #33FFF0 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C3
grid-row: 2
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Master Bedroom
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_masterbed4
name: Shade 4
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_master_bedroom_4
signal_entity: sensor.somfy_shade_rssi_master_bedroom_4
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #33FFF0 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C4
grid-row: 2
# Master Bathroom Cards
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Master Bathroom
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.master_bathroom_shade_group
name: All in Room
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #FF33F0 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: G
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Master Bathroom
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_masterbath1
name: Shade 1
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_masterbath1
signal_entity: sensor.somfy_shade_rssi_master_masterbath1
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #FF33F0 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C1
grid-row: 2
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Master Bathroom
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_masterbath2
name: Shade 2
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_masterbath2
signal_entity: sensor.somfy_shade_rssi_master_masterbath2
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #FF33F0 !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C2
grid-row: 2
# Guest Bedroom Cards
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Guest Bedroom
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.guest_bedroom_shade_group
name: All in Room
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #F033FF !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: G
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Guest Bedroom
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_guest1
name: Shade 1
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_guest_bedroom_1
signal_entity: sensor.somfy_shade_rssi_guest_bedroom_1
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #F033FF !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C1
grid-row: 2
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Guest Bedroom
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_guest2
name: Shade 2
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_guest_bedroom_2
signal_entity: sensor.somfy_shade_rssi_guest_bedroom_2
card_mod:
style: |
ha-card {
max-width: 190px !important;
border: 3px solid #F033FF !important;
border-radius: 8px !important;
background: transparent !important;
}
view_layout:
grid-column: C2
grid-row: 2
You are testing with a custom button card which may not be properly adjusted for using in a grid. In my experience, at least in part of a height it should be adjusted by card-mod.
1 Like
As Ildar pointed out, the `custom:button-card is a different animal. The card size can be controlled through several methods
for example:
size: aspect:
styles:
card:
- width: ?px
- height: ?px
Check out this thread
You also may want to research the @media CSS options for mobile formatting if you dashboard is not using the Sections format.
Ltek
June 1, 2025, 2:00pm
17
Zero problems with the button card, its the grid not placing the ‘other cards’… ive spent 4+ hrs reading css grid docs and ha docs, and 3+ more hours in AI and testing trying at at least 10 variations of codes and cards… im giving up.
You telling me im doing it wrong, yet no one does/can correct my code so i can learn… that leads to the logocal conclusion that HA dashboards arre a hackery even long tome experts find difficult. Unless you have ninja coding skills figuring out a disparate mish mash from multiple “languages” is ridiculously difficult. Dashboards need a complete ovehaul.
Ltek
June 14, 2025, 1:21pm
18
Hey all, trying this again if anyone can help I’d really appreciate it.
I’ve spent MANY hours on this just to get the below YAML working cleanly. BUT I still cannot get the 2nd row to scroll while keeping the 1st row static when the row changes from 2 to 4 entities. I have tried a million different things – using/not card wrappers, trying different CSS code, etc.
I want this view to work on any size device screen, so Row 1 must always stay ‘on screen’ and Row 2 must scroll when there are more than 2 entities in that row. This will allow the Room Switch buttons & ‘All in Room’ to always be visible.
type: custom:grid-layout
icon: mdi:roller-shade
path: shades
title: Shades
layout:
grid-gap: 0px
grid-template-columns: 190px 190px 190px 190px
grid-template-rows: auto auto
grid-template-areas: |
"1 1 2 2"
"3 3 3 3"
cards:
- type: vertical-stack
view_layout:
grid-column: 1
grid-row: 1
cards:
- type: custom:button-card
name: Kitchen
entity: input_select.shades_group_display_selector
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.shades_group_display_selector
option: Kitchen
state:
- value: Kitchen
styles:
card:
- background-color: var(--primary-color)
styles:
card:
- padding: 8px
- font-weight: normal
- font-size: 18px
- justify-content: center
- text-align: center
- border-radius: 4px
- type: custom:button-card
name: Living Room
entity: input_select.shades_group_display_selector
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.shades_group_display_selector
option: Living Room
state:
- value: Living Room
styles:
card:
- background-color: var(--primary-color)
styles:
card:
- padding: 8px
- font-weight: normal
- font-size: 18px
- justify-content: center
- text-align: center
- border-radius: 4px
- type: custom:button-card
name: Play Room
entity: input_select.shades_group_display_selector
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.shades_group_display_selector
option: Play Room
state:
- value: Play Room
styles:
card:
- background-color: var(--primary-color)
styles:
card:
- padding: 8px
- font-weight: normal
- font-size: 18px
- justify-content: center
- text-align: center
- border-radius: 4px
- type: custom:button-card
name: Master Bedroom
entity: input_select.shades_group_display_selector
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.shades_group_display_selector
option: Master Bedroom
state:
- value: Master Bedroom
styles:
card:
- background-color: var(--primary-color)
styles:
card:
- padding: 8px
- font-weight: normal
- font-size: 18px
- justify-content: center
- text-align: center
- border-radius: 4px
- type: custom:button-card
name: Master Bathroom
entity: input_select.shades_group_display_selector
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.shades_group_display_selector
option: Master Bathroom
state:
- value: Master Bathroom
styles:
card:
- background-color: var(--primary-color)
styles:
card:
- padding: 8px
- font-weight: normal
- font-size: 18px
- justify-content: center
- text-align: center
- border-radius: 4px
- type: custom:button-card
name: Guest Bedroom
entity: input_select.shades_group_display_selector
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.shades_group_display_selector
option: Guest Bedroom
state:
- value: Guest Bedroom
styles:
card:
- background-color: var(--primary-color)
styles:
card:
- padding: 8px
- font-weight: normal
- font-size: 18px
- justify-content: center
- text-align: center
- border-radius: 4px
- type: horizontal-stack
view_layout:
grid-column: 2
grid-row: 1
cards:
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Kitchen
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.kitchen_shade_group
name: All in Room
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Living Room
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.living_room_shade_group
name: All in Room
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Play Room
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.playroom_shade_group
name: All in Room
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Master Bedroom
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.master_bedroom_shade_group
name: All in Room
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Master Bathroom
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.master_bathroom_shade_group
name: All in Room
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Guest Bedroom
card:
type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.guest_bedroom_shade_group
name: All in Room
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Kitchen
view_layout:
grid-column: 1 / -1
grid-row: 2
card:
type: horizontal-stack
cards:
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shades_kitchen_tuya_ts0601_cover_1
name: Shade 1
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.shades_kitchen_tuya_ts0601_cover_1_battery
signal_entity: sensor.shades_kitchen_tuya_ts0601_cover_1_linkquality
card_mod:
style: |
:host {
max-width: 190px !important;
}
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shades_kitchen_tuya_ts0601_cover_2
name: Shade 2
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.shades_kitchen_tuya_ts0601_cover_2_battery
signal_entity: sensor.shades_kitchen_tuya_ts0601_cover_2_linkquality
card_mod:
style: |
:host {
max-width: 190px !important;
}
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Living Room
view_layout:
grid-column: 1 / -1
grid-row: 2
card:
type: horizontal-stack
cards:
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shades_living_room_tuya_ts0601_cover_1
name: Shade 1
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.shades_living_room_tuya_ts0601_cover_1_battery
signal_entity: sensor.shades_living_room_tuya_ts0601_cover_1_linkquality
card_mod:
style: |
:host {
max-width: 190px !important;
}
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shades_living_room_tuya_ts0601_cover_2
name: Shade 2
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.shades_living_room_tuya_ts0601_cover_2_battery
signal_entity: sensor.shades_living_room_tuya_ts0601_cover_2_linkquality
card_mod:
style: |
:host {
max-width: 190px !important;
}
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shades_living_room_tuya_ts0601_cover_3
name: Shade 3
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.shades_living_room_tuya_ts0601_cover_3_battery
signal_entity: sensor.shades_living_room_tuya_ts0601_cover_3_linkquality
card_mod:
style: |
:host {
max-width: 190px !important;
}
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shades_living_room_tuya_ts0601_cover_4
name: Shade 4
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.shades_living_room_tuya_ts0601_cover_4_battery
signal_entity: sensor.shades_living_room_tuya_ts0601_cover_4_linkquality
card_mod:
style: |
:host {
max-width: 190px !important;
}
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Play Room
view_layout:
grid-column: 1 / -1
grid-row: 2
card:
type: horizontal-stack
cards:
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shade_playroom1
name: Shade 1
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_playroom1
signal_entity: sensor.somfy_shade_rssi_playroom1
card_mod:
style: ":host {\n max-width: 190px !important;\n}\t\t\t \n"
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shade_playroom2
name: Shade 2
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_playroom2
signal_entity: sensor.somfy_shade_rssi_playroom2
card_mod:
style: ":host {\n max-width: 190px !important;\n}\t\t\t \n"
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shade_playroom3
name: Shade 3
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_playroom3
signal_entity: sensor.somfy_shade_rssi_playroom3
card_mod:
style: ":host {\n max-width: 190px !important;\n}\t\t\t \n"
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.shade_playroom4
name: Shade 4
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_playroom4
signal_entity: sensor.somfy_shade_rssi_playroom4
card_mod:
style: ":host {\n max-width: 190px !important;\n}\t\t\t \n"
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Guest Bedroom
view_layout:
grid-column: 1 / -1
grid-row: 2
card:
type: horizontal-stack
cards:
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_guest1
name: Shade 1
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_guest_bedroom_1
signal_entity: sensor.somfy_shade_rssi_guest_bedroom_1
card_mod:
style: ":host {\n max-width: 190px !important;\n}\t\t\t \n"
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_guest2
name: Shade 2
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_guest_bedroom_2
signal_entity: sensor.somfy_shade_rssi_guest_bedroom_2
card_mod:
style: ":host {\n max-width: 190px !important;\n}\t\t\t \n"
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Master Bedroom
view_layout:
grid-column: 1 / -1
grid-row: 2
card:
type: horizontal-stack
cards:
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_masterbed1
name: Shade 1
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_master_bedroom_1
signal_entity: sensor.somfy_shade_rssi_master_bedroom_1
card_mod:
style: ":host {\n max-width: 190px !important;\n}\t\t\t \n"
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_masterbed2
name: Shade 2
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_master_bedroom_2
signal_entity: sensor.somfy_shade_rssi_master_bedroom_2
card_mod:
style: ":host {\n max-width: 190px !important;\n}\t\t\t \n"
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_masterbed3
name: Shade 3
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_master_bedroom_3
signal_entity: sensor.somfy_shade_rssi_master_bedroom_3
card_mod:
style: ":host {\n max-width: 190px !important;\n}\t\t\t \n"
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_masterbed4
name: Shade 4
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_master_bedroom_4
signal_entity: sensor.somfy_shade_rssi_master_bedroom_4
card_mod:
style: ":host {\n max-width: 190px !important;\n}\t\t\t \n"
- type: conditional
conditions:
- entity: input_select.shades_group_display_selector
state: Master Bathroom
view_layout:
grid-column: 1 / -1
grid-row: 2
card:
type: horizontal-stack
cards:
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_masterbath1
name: Shade 1
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_master_bathroom_1
signal_entity: sensor.somfy_shade_rssi_master_bathroom_1
card_mod:
style: |
:host {
max-width: 190px !important;
}
- type: custom:enhanced-shutter-card
scale_icons: false
entities:
- entity: cover.somfy_shade_masterbath2
name: Shade 2
disable_end_buttons: true
window_image: esc-window.png
shutter_slat_image: esc-shutter-slat.png
name_position: bottom
disable_partial_open_buttons: false
always_percentage: true
invert_percentage: false
base_height_px: 120
base_width_px: 40
battery_entity: sensor.somfy_shade_battery_level_master_bathroom_2
signal_entity: sensor.somfy_shade_rssi_master_bathroom_2
card_mod:
style: |
:host {
max-width: 190px !important;
}
