To-do list card

Configuration
4

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
5

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.

6

is there a way to reduce the line-height using CSS/Card-mod?

1 Like
7

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.

1 Like
8

This was working, but something changed in 2024.2; I cannot hide checked items anymore; any suggestions? Thanks in advance!

9

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:

image

      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!

9 Likes
10

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

11

This is awesome, thank you!
Any ideas on how to hide the “Add item” section?

12

just add, inline:

            ha-card.type-todo-list .addRow {
              display: none;
            }
1 Like
13

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!

14

Thanks, that did the trick.
Very much appreciated!

16

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
17

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

18

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.

19
20

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;
      }
21

Anyone? I would really like to disable this…

22

So you basically just want to list the items?
Keywords: item.summary
Have a look at something similar Help, how to use: todo.get_items

23

Yes, and not be able to edit them by clicking on the item…

24

If you just want to display them, use a markdown-card and list them. This card here is only needed, if you want to have more functions and control.

For listing these, you just add them to a markdowncard and are good to go. :slight_smile: