Other
- Optimise the overall performance of the card (that was largely reduced by the last release).
There seems to be issues with the way 0.110.0b is handling decluttering cards and also custom button cards, positioning of icons has changed and some rows of buttons have disappeared altogether.
I also have some decluttering cards with multiple mini-graph-cards in them, all the graph cards have shrunk but mini-graph-cards outside of a decluttering card are unaffected.
@RomRider I’m happy to post whatever info you think will help to resolve this, please just let me know.
Thanks
Hi @RomRider
Just following up on my earlier post, I’ve updated to v3.3.4 of the button-card which has resolved the icon size/position issue on most of my setup but still having issues with rows of button-cards in a decluttering template, below is the template I use as my header which works perfectly on 0.109.6 but in all of the 0.110b versions it doesn’t show up. Sometimes the ‘sun’ icon shows but mostly nothing at all is visible.
I also have other rows of buttons that work in 0.109.6 but don’t show at all in 0.110b, any help you can provide to point me in the right direction would be great.
Thanks
default:
- color: var(--header-text-color)
- icon1: home-variant-outline
- path1: home
- icon2: menu-open
- path2: menu
- icon3: cogs
- path3: settings
- icon4: information-variant
- path4: shl
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- !include ../includes/h-space-10.yaml
- type: conditional
conditions:
- entity: sun.sun
state: above_horizon
card:
type: custom:button-card
style: |
ha-card {
background: rgba(0,0,0,0);
box-shadow: none;
}
entity: binary_sensor.protection_window
show_name: false
show_state: false
aspect_ratio: 1/1
color_type: icon
color: auto
icon: mdi:white-balance-sunny
size: 70%
styles:
card:
- padding: 5%
state:
- value: "on"
color: rgb(255,200,0)
- value: "off"
color: '[[color]]'
- value: "unavailable"
color: rgba(0,0,0,1)
tap_action:
action: none
- type: conditional
conditions:
- entity: sun.sun
state: below_horizon
card:
type: custom:button-card
style: |
ha-card {
background: rgba(0,0,0,0);
box-shadow: none;
}
aspect_ratio: 1/1
color_type: icon
color: '[[color]]'
icon: mdi:weather-night
size: 70%
styles:
card:
- padding: 5%
tap_action:
action: none
- type: custom:button-card
style: |
ha-card {
background: rgba(0,0,0,0);
box-shadow: none;
}
aspect_ratio: 1/1
color_type: icon
color: '[[color]]'
icon: mdi:message-outline
size: 70%
styles:
card:
- padding: 5%
tap_action:
action: navigate
navigation_path: notifications
- type: conditional
conditions:
- entity: input_boolean.guest_mode
state: 'on'
card:
type: custom:button-card
style: |
ha-card {
background: rgba(0,0,0,0);
box-shadow: none;
}
aspect_ratio: 1/1
color_type: icon
color: rgb(115,235,15)
icon: mdi:account-multiple-outline
size: 70%
styles:
card:
- padding: 5%
tap_action:
action: none
- type: conditional
conditions:
- entity: input_boolean.away_mode
state: 'on'
card:
type: custom:button-card
style: |
ha-card {
background: rgba(0,0,0,0);
box-shadow: none;
}
aspect_ratio: 1/1
color_type: icon
color: rgb(0,185,255)
icon: mdi:airplane
size: 70%
styles:
card:
- padding: 5%
tap_action:
action: none
- type: conditional
conditions:
- entity: input_boolean.guest_mode
state: 'off'
- entity: input_boolean.away_mode
state: 'off'
card:
type: custom:button-card
style: |
ha-card {
background: rgba(0,0,0,0);
box-shadow: none;
}
aspect_ratio: 1/1
color_type: icon
color: rgba(0,0,0,0)
icon: mdi:power-off
size: 70%
styles:
card:
- padding: 5%
tap_action:
action: none
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
style: |
ha-card {
background: rgba(0,0,0,0);
box-shadow: none;
}
aspect_ratio: 1/1
color_type: icon
color: '[[color]]'
icon: 'mdi:[[icon1]]'
size: 70%
styles:
card:
- padding: 5%
tap_action:
action: navigate
navigation_path: '[[path1]]'
- type: custom:button-card
style: |
ha-card {
background: rgba(0,0,0,0);
box-shadow: none;
}
aspect_ratio: 1/1
color_type: icon
color: '[[color]]'
icon: 'mdi:[[icon2]]'
size: 70%
styles:
card:
- padding: 5%
tap_action:
action: navigate
navigation_path: '[[path2]]'
- type: custom:button-card
style: |
ha-card {
background: rgba(0,0,0,0);
box-shadow: none;
}
aspect_ratio: 1/1
color_type: icon
color: '[[color]]'
icon: 'mdi:[[icon3]]'
size: 70%
styles:
card:
- padding: 5%
tap_action:
action: navigate
navigation_path: '[[path3]]'
- type: custom:button-card
style: |
ha-card {
background: rgba(0,0,0,0);
box-shadow: none;
}
aspect_ratio: 1/1
color_type: icon
color: '[[color]]'
icon: 'mdi:[[icon4]]'
size: 70%
styles:
card:
- padding: 5%
tap_action:
action: navigate
navigation_path: '[[path4]]'
- !include ../includes/h-space-10.yaml
Could you please remove decluttering card on one of the line which doesn’t work and see If the issue persists? It’s to help me narrow down where the problem could be. Thanks
Hi @RomRider
I removed the decluttering card from this row and the buttons now show as they should.
default:
- name: Desk Lift
- entity1: desk_up
- entity2: desk_stop
- entity3: desk_down
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- !include ../includes/h-space-10.yaml
- type: custom:button-card
style: |
ha-card {
background: var(--button-background-color);
border-radius: 20px;
font-family: var(--font-family);
box-shadow: var(--box-shadow-static);
}
aspect_ratio: 1.5/1
color_type: icon
color: var(--button-text-color)
entity: 'switch.[[entity1]]'
name:
icon: mdi:chevron-up
size: 35%
styles:
card:
- padding: 5%
name:
- font-size: 15px
- font-weight: bold
- color: var(--button-text-color)
tap_action:
action: toggle
- !include ../includes/h-space-10.yaml
- type: custom:button-card
style: |
ha-card {
background: var(--button-background-color);
border-radius: 20px;
font-family: var(--font-family);
box-shadow: var(--box-shadow-static);
}
aspect_ratio: 1.5/1
color_type: icon
color: var(--button-text-color)
entity: 'switch.[[entity2]]'
name:
icon: mdi:minus
size: 30%
styles:
card:
- padding: 5%
name:
- font-size: 15px
- font-weight: bold
- color: var(--button-text-color)
tap_action:
action: toggle
- !include ../includes/h-space-10.yaml
- type: custom:button-card
style: |
ha-card {
background: var(--button-background-color);
border-radius: 20px;
font-family: var(--font-family);
box-shadow: var(--box-shadow-static);
}
aspect_ratio: 1.5/1
color_type: icon
color: var(--button-text-color)
entity: 'switch.[[entity3]]'
name:
icon: mdi:chevron-down
size: 35%
styles:
card:
- padding: 5%
name:
- font-size: 15px
- font-weight: bold
- color: var(--button-text-color)
tap_action:
action: toggle
- !include ../includes/h-space-10.yaml
Not sure if it helps, but all my buttons are in decluttering cards and single buttons like the one below work perfectly inside a decluttering template.
default:
- name:
- entity:
- state: false
- icon:
- lock: false
- user1: Brad Anderson
- user2:
- user3:
- action: more-info
card:
type: custom:button-card
style: |
ha-card {
background: var(--button-background-color);
border-radius: 20px;
font-family: var(--font-family);
box-shadow:
{% if is_state('[[entity]]', 'on') %}
var(--box-shadow-on);
{% elif is_state('[[entity]]', 'off') %}
var(--box-shadow-off);
{% elif is_state('[[entity]]', 'unavailable') %}
var(--box-shadow-off);
{% endif %}
}
aspect_ratio: 2/1.135
name: '[[name]]'
entity: '[[entity]]'
show_state: '[[state]]'
color_type: icon
color: auto
icon: 'mdi:[[icon]]'
lock:
enabled: '[[lock]]'
unlock: hold
duration: 4
exemptions:
- username: '[[user1]]'
- username: '[[user2]]'
- username: '[[user3]]'
size: 15%
styles:
card:
- padding-top: 5%
- padding-bottom: 10%
- padding-left: 10%
icon:
- margin-top: 0%
- margin-left: -40%
name:
- padding-top: 2px
- justify-self: start
- font-size: 16px
- color: var(--button-text-color)
state:
- justify-self: start
- font-size: 16px
- color: var(--button-text-color)
lock:
- padding-top: 15px
- padding-right: 15px
- color: var(--lock-color)
state:
- value: "on"
color: rgb(110,235,15)
- value: "off"
color: var(--button-off-color)
- value: "unavailable"
color: rgba(0,0,0,1)
tap_action:
action: toggle
hold_action:
action: '[[action]]'
1 Like
I am facing the same issues… Single buttons in declutter show up, when I have them in a row, I use it for headers on Lovelace pages… They are not visible anymore… Totally hided…
@BradAU did you figure but out already?
No not yet @pergola.fabio, I think it will need @RomRider to fix decluttering-card for changes in 0.110 or provide more information when he has time.
Ok 
Do you also have some Markdown header texts in declutter? They now show up verry slow, sometimes I need to wait 5 seconds ,then then the declutter with markdown are visible… Seeems like some lag, that the frontend is waiting for something…
I don’t use Markdown headers but do use button-card for headers as below and they’re not showing at all either.
default:
- name:
card:
type: custom:button-card
style: |
ha-card {
box-shadow: none;
font-family: var(--font-family);
}
name: '[[name]]'
show_state: false
color_type: card
color: rgba(0,0,0,0)
styles:
card:
- height: 28px
- padding-left: 5%
name:
- justify-self: start
- font-size: 28px
- color: var(--button-text-color)
Hi @RomRider not sure if it helps to narrow down the issue but since upgrading my dev system to the stable release of 0.110, nothing appears to have changed when I first click on a view but if I then refresh that view, pull down in Chrome on Android, the view looks exactly right with all elements working.
Not sure exactly what has changed in 0.110 as the frontend is much ‘snappier’ which is great but looks like this affects the way decluttering-card loads on first go.
Thanks Brad
How is it possible that your header isn’t displaying, that’s also only 1 button?
I use the same, and indeed header isn’t displaying either… If I use a markdown for headers, , with declutter
When I refresh a page, the text only appears after like 5 sec…
I’m not sure why the headers don’t show when other single buttons show fine, also when I refresh as mentioned in my last comment it’s very hit and miss, sometimes it loads correctly and other times it doesn’t.
It’s indeed same for me…
Do you use by any chance the homekit theme by jimz? I have the code from him for my headers with text/single button and headers with multiple buttons in a row
No I don’t use jimz theme.
I’ll have a look, didn’t have time in the past couple of days.
1 Like
thnx in advance
for a test i did below, its actually the same header, the texf “Fabio Slow” is only visible after 5 sec after refreshing a lovelace view
the text “Fabio Fast” is visible instant…
- type: custom:decluttering-card
template: header
variables:
- content: '## Fabio Slow'
- type: markdown
style: |
ha-card {
box-shadow: none;
height: 33px;
background: none;
padding: 0px 10px;
color: var(--header-color);
}
content: '## Fabio Fast'
here is the template:
# Default Config
default:
# Name/Title
#### #### #### #### #### #### #### #### #### #### #### #
type: markdown
style: |
ha-card {
box-shadow: none;
height: 33px;
background: none;
padding: 0px 10px;
color: var(--header-color);
}
content: '[[content]]'
Bugfixes
- Attempt to fix issues with HA 0.110 (Might be related to https://github.com/home-assistant/frontend/issues/5965)
So this will get fixed in core as it is a bug, but in the meantime, the version above should do the trick @BradAU, @pergola.fabio 
much appreciated
my header with buttons are back
my header with markdown texts are back!!