Have an option to hide checked items on the ToDo-list card

[advisorgee]

I would like to see an addition to the ToDo-List card to hide the checked items. I don’t need to see the items I’ve already bought/done, but may need to reference them or re-add them in the future.

I tried using card_mod to achieve this, but the same class is used for both new items and checked items.

[JDogg016 (Justin)]

Did you ever figure out how to do this?

[TomekG (Tomasz)]

+1 from my side. It’s useful and also reduces how much place the list takes.

[advisorgee]

Someone posted a solution to this using card_mod;

To-do list card

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: .: | …

[FragMenthor (Pedro Roque)]

Seems this solution is not working anymore, anyone has a workaround? Thanks!

[FragMenthor (Pedro Roque)]

Think I figured it out for now, 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!

[advisorgee]

Works great, thanks for fixing it.

[sparkydave (🇦🇺 Dave)]

I just tried this work-around and while it works, I would like to have the checked off items still available via a drop down. This should really be part of the core card options.