Now with the new todo list integration, is there any fancy list cards anyone can recommend? The default todo list card is limited when it comes to customization. Or is the only way to customize is using card-mod?
I just want to be able to show a list without the ability to add new, and I want to hide the check boxes.
4 Likes
I agree. At bare minimum you should be able to select how many todo’s to show.
2 Likes
Second this, off top of my head, would love to be able to switch between lists, see/edit the extra to do item fields, hide crossed off items, list top x items, order items by date due or created, clickable URLs and ability for companion app to share a URL to home assistant and populate a new list item (eg for kids christmas lists!). Im slowly building my HA knowledge but not quite at the level for creating a custom card myself (yet)
1 Like
I too would like a more customizable todo list card. Given how much the todo list functionality has been expanded recently though, I have no doubt this will happen soon enough!
Right now I’m trying to use a todo list to manage active alerts/alarms (like temperature issues, motion detection, trash day about to come up, etc) in my HA instance. I’m using the following card mod config to show a list of active items on the list:
type: todo-list
entity: todo.alerts
card_mod:
style:
.: |
ha-card.type-todo-list div.header {
display: none;
}
ha-card.type-todo-list .addRow {
display: none;
}
ha-card.type-todo-list div.divider {
display: none;
}
ha-card.type-todo-list mwc-list#checked {
display: none;
}
ha-check-list-item$: |
mwc-checkbox {
display: none;
}
This will hide the headers, all items marked as completed, the menu buttons as well as the checkboxes. I can still click on an item to manage it.
15 Likes
Would be great if we could add the todo entity/ies to the calendar card and have them show up on due-dates and/or seperately.
is there a way to reduce the line-height using CSS/Card-mod?
I have been trying to watch the commits for the home assistant front end. haven’t seen much work on the todo stuff. There is some, but I don’t see anything really related to this topic. It’s times like this I hate that I never got in to front dev. I hate JS and CSS. I have always been a backend developer, always had designers to “smack the pretty” on stuff lol.
This was working, but something changed in 2024.2; I cannot hide checked items anymore; any suggestions? Thanks in advance!
This worked for me, after 2024.2, added section ha-check-list-item.editRow.completed:
My full card-mod configuration, with line spacing “corrected” to my likings:
card_mod:
style:
ha-textfield:
$: |
.mdc-text-field {
margin-top: -28px;
margin-bottom: 5px;
height: 50px !important;
}
.mdc-text-field__input {
color: white !important;
}
.: |
ha-card.type-todo-list div.header {
display: none;
}
ha-check-list-item.editRow.completed {
display: none;
}
:host {
--mdc-checkbox-ripple-size: 33px;
}
ha-check-list-item {
min-height: 28px !important;
}
ha-card {
--mdc-typography-subtitle1-font-size: 17px;
}
ha-icon-button.reorderButton,
ha-icon-button.addButton {
margin-top: -35px !important;
}
.divider {
display: none;
}
Thanks!
7 Likes
Thanks, working now fine in my dashboard (combined your two codes)
another question about the Bring Shopping List Card:
any improvements how i can change the refresh rate?
if i add a item on the ios app it takes 1-2 minutes till it shows in my dashboard
This is awesome, thank you!
Any ideas on how to hide the “Add item” section?
just add, inline:
ha-card.type-todo-list .addRow {
display: none;
}
1 Like
Just found this thread. Exactly what I was looking for.
What do I need to change in the code to show the checkbox on the left side to the text and prevent that you can click on the text which opens the popup?
type: todo-list
entity: todo.einkaufsliste
card_mod:
style:
.: |
ha-card.type-todo-list div.header {
display: none;
}
ha-card.type-todo-list .addRow {
display: none;
}
ha-card.type-todo-list div.divider {
display: none;
}
ha-card.type-todo-list mwc-list#checked {
display: none;
}
ha-check-list-item$: |
mwc-checkbox {
display: none;
}
I am not really into coding. I hope you can help me. Thank you!
Thanks, that did the trick.
Very much appreciated!
Thank you all for the help!
I like this setup:
card_mod:
style:
.: |
ha-card.type-todo-list div.header {
display: none;
}
}
ha-card.type-todo-list div.divider {
display: none;
}
ha-card.type-todo-list mwc-list#checked {
display: none;
}
ha-icon-button.reorderButton,
ha-icon-button.addButton {
margin-top: -17px !important;
}
:host {
--mdc-checkbox-ripple-size: 33px;
}
ha-check-list-item {
min-height: 28px !important;
}
ha-textfield:
$: |
.mdc-text-field {
margin-top: -12px;
margin-bottom: 5px;
height: 50px !important;
}
.mdc-text-field__input {
color: white !important;
}
I wanted to still see the completed items so i made a mix of yours to compress it and remove the “active/Compleeted” text
2 Likes
Hello,
Did something change in version 2023.12? I still have 2023.11, and none of this is changing my todo lists. I use card_mod all the time too. This makes no sense to me
Where do we submit feature requests? There should be a way to filter based on due dates, and limit the number of days in advance it shows. I have reoccurring annual tasks and they all show in my list.
How do i disable the possibility to click on an item to manage it.
So that if you click on an item, then nothing should happen.
I hope someone can help me with this…
type: todo-list
entity: todo.alerts
card_mod:
style:
.: |
ha-card.type-todo-list div.header {
display: none;
}
ha-card.type-todo-list .addRow {
display: none;
}
ha-card.type-todo-list div.divider {
display: none;
}
ha-card.type-todo-list mwc-list#checked {
display: none;
}
ha-check-list-item$: |
mwc-checkbox {
display: none;
}
Anyone? I would really like to disable this…