Omg, that’s a leftover from before I published the card, it shouldn’t be there, thanks for pointing it out, I’ll delete it.
There are two files from dist folder.
https://github.com/custom-cards/decluttering-card/tree/master/dist
Yes, I declared this file in the resources section.
- url: /community_plugin/decluttering-card/decluttering-card.js
type: module
That does work, but it’s odd that it just stops working all of the sudden.
So I finally got into this after some weeks delay, and I must say this is great. It is much more versatile than anchors. I use it for my buttons and I was able to create a single template for all of my buttons (which is amazing btw). Just one thing, would it be possible to have the entire tap_action settings in a template? For example, if I want to use a service as tap_action it will require me to set up an extra line. But leaving that line in for entities that don’t need this will give an error when pressed (extra keys are not allowed). I hoped to use a single template for all my buttons. I have it pretty much sorted out for my other buttons, but for a service call I would need extra lines.
You could try something like:
Template:
button_template:
xxxx:
default:
- tap_action:
card:
tap_action: '[[tap_action]]'
Card:
variables:
- tap_action:
action: call-service
[...]
And if undefined it will end up being null and not do anything.
A variable can be a complete object if needed as you can see.
1 Like
Ok I will try this.
Thanks @romrider this works perfectly fine. I would love to do this with a label/label_template as well but I can’t seem to get it to work.
I have tried this:
'[[label]]': '[[label_template]]'
It works perfectly fine if it has only one line (so for a label it would work without a problem). However it gets more complicated when trying to put in a string like this:
label_template: >
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
It will throw an error like this:
JSON.parse: bad control character in string literal at line 1 column 279 of the JSON data
I would love to make a single template for buttons that use a label and buttons that use a label_template. I would love to do this as the light buttons are exactly the same as my switch buttons with the exception of this label/label_template issue. Thanks a lot again for the hard work.
Compatible with Swiper Card? When using a Decluttering card template within a Swiper card:
decluttering_templates:
room_button_template:
default:
- entity: []
card:
type: custom:button-card
entity: '[[entity]]'
name: '[[name]]'
...
...
- type: custom:swipe-card
start_card: 1
parameters:
freeMode: true
slidesPerView: auto
iOSEdgeSwipeDetection: true
slideToClickedSlide: true
cards:
- type: custom:decluttering-card
template: room_button_template
variables:
- entity: sensor.living_room_ecobee_temperature
...
Swiper Card adds the slide classes to the decluttering-card DIV:
<decluttering-card class="swiper-slide swiper-slide-active">...
Instead of the button card DIV:
<button-card class="swiper-slide swiper-slide-active" ...
This causes each swiper slide to be stretched out. Any thoughts on how to fix this? Thanks in advance!
Would it be possible to make “partial” templates, like the ones we can use for the button-card where we can add or overwrite keys when we instantiate the template, like so:
decluttering_templates:
entities_card:
card:
type: entities
style: |
ha-card {
border: solid 1px var(--dark-primary-color);
border-radius: 12px;
overflow: hidden;
width: 97%;
margin: 0 auto;
padding-top: 0px;
}
# Use the above template
cards:
- type: custom:decluttering-card
template: entities_card
entities: # This key is not present in the template
- light.light_1
- light.light_2
The example might not be 100% syntactically correct, but i hope you get the idea.
The use case is i have several entities card that all look the same but they have variable amounts of rows in them.
I see your point, however, that doesn’t work well with arrays 
and that’s why I didn’t go this way.
Let me think about something, I might come up with a way to do it, a bit differently though!
2 Likes
I’ll have a look, but I think that’s something you’d have to see with the swiper card dev and the way he adds classes to elements in the DOM. I guess you’d have the same issue with card-modder/card-mod.
Please open an issue on github, it would be best.
Please open an issue on github also 
ignore me…
Forgive me in advance for digging up something we thought was fixed. I just discovered what appears to be a refresh issue with the PR you submitted for vertical-stack-in-card. Upon the initial loading of my 2-in-1 button card, a gap appears in between the two cards
However, if I click on another card and then click back, the gap disappears.
Good example, can you share .yaml for this
That has something to do with the way lovelace loads the stuff, maybe you should try to leverage card-loader.
For me, this solution fixes this kind of issues.
Hi friends,
I am trying to create a decluttering card for a blank button, with the only variable its width (in px).
Whatever I try, the variable “width_in_px” is not taken into account when rendering.
My definition of the decluttering template:
# ====================
# = Button Blank =
# ====================
blank_button_card:
default:
- width_in_px: 15px
card:
type: custom:button-card
color_type: blank-card
styles:
card:
- width: '[[width_in_px]]'
My attempt in ui-lovelace.yaml:
- type: custom:decluttering-card
template: blank_button_card
variables:
- width_in_px: 15px
Any help you could lend to somebody going crazy ?
Thx
I actually use the Templating functions built into custom:button-card to achieve what you are trying to do. For example:
Template:
button_card_templates:
horizontal-divider-grey-layout:
color_type: blank-card
styles:
card:
- height: 1%
- width: 100%
- background-color: '#292929'
Declaration
- type: custom:button-card
template: horizontal-divider-grey-layout
1 Like
Thx, Daphatty, for pointing this out.
Is there no way to do this with a Decluttering Card ?
The way I specify the width in the button-card is not compatible with decluterring card. It’s a bit hacky as Lovelace isn’t made to support fixed width because every object’s size is supposed to be dynamic.
The way to go here is to use the button card templates as @daphatty said.