I am new to customizing my UI and noticed that when using the custom button-card along with the sidebar card my cards overlap as such:
Any ideas?
My configuration:
views:
- title: Home
cards:
- type: grid
cards:
- type: custom:button-card
entity: light.living_room
icon: mdi:floor-lamp
size: 80%
styles:
card:
- height: 120px
- width: 155px
- type: custom:button-card
entity: fan.living_room
size: 80%
styles:
card:
- height: 120px
- width: 155px
- type: custom:button-card
entity: switch.tv
size: 80%
styles:
card:
- height: 120px
- width: 155px
- type: grid
cards:
- type: custom:button-card
entity: light.dining_hall
size: 80%
styles:
card:
- height: 120px
- width: 155px
- type: custom:button-card
entity: light.dining_window
size: 80%
styles:
card:
- height: 120px
- width: 155px
- type: custom:button-card
entity: switch.hallway
size: 80%
styles:
card:
- height: 120px
- width: 155px
- type: grid
cards:
- type: custom:button-card
entity: lock.back_door
tap_action:
action: call-service
service: >-
[[[ return entity.state === "locked" ? "lock.unlock" :
"lock.lock" ]]]
service_data:
entity_id: lock.back_door
size: 80%
styles:
card:
- height: 120px
- width: 155px
- type: custom:button-card
entity: lock.front_door
tap_action:
action: call-service
service: >-
[[[ return entity.state === "locked" ? "lock.unlock" :
"lock.lock" ]]]
service_data:
entity_id: lock.front_door
size: 80%
styles:
card:
- height: 120px
- width: 155px
- type: custom:button-card
entity: lock.kitchen_door
tap_action:
action: call-service
service: >-
[[[ return entity.state === "locked" ? "lock.unlock" :
"lock.lock" ]]]
service_data:
entity_id: lock.kitchen_door
size: 80%
styles:
card:
- height: 120px
- width: 155px
- type: grid
cards:
- type: custom:button-card
entity: light.office
size: 80%
styles:
card:
- height: 120px
- width: 155px
- type: custom:button-card
entity: light.bedroom_his
size: 80%
styles:
card:
- height: 120px
- width: 155px
- type: custom:button-card
entity: light.bedroom_hers
size: 80%
styles:
card:
- height: 120px
- width: 155px
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.openweathermap
- type: alarm-panel
states:
- arm_home
- arm_away
entity: alarm_control_panel.house
name: Alarm
sidebar:
width:
tablet: 25
desktop: 20
hideHassSidebar: true
hideTopMenu: true
digitalClock: true
date: true
dateFormat: DD MMMM YY
sidebarMenu:
- action: navigate
navigation_path: /lovelace/home
name: Home
active: true
- action: navigate
navigation_path: /lovelace/Test
name: Test
active: true