To-do list card

Configuration
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:

25

This must be possible to “disable” somehow


26

Why? :slight_smile: You’re setting up something, that you directly disable without use. But there is a card, that exactly does what you want? The code above is for not disabling the click functionality. :thinking:

Anyway, sorry, but I can’t help with disabling. :slight_smile:

27

He’s probably asking how to disable clicking the name to open the edit dialog, but keep the checkmark, completely legit.

I can’t help but if you figure out how to target the name only you can add pointer-event: none. Or events, don’t remember if singular or plural.

28

It is totally legit, but not productive
 :slight_smile: Without knowing “why”, one can’t help. :wink: If we know, what’s the idea behind to disable this or that, one could offer a possibly better alternative.

Why so secretive? Is it something people shouldn’t know? :laughing: Must be some hell of a todo list thing
 :joy:

29

Does anyone know how to edit or remove this line?
The fact of writing “no task” instead of “no article” annoys me
 :slight_smile:

Capture d’écran 2024-07-10 111559
Capture d’écran 2024-07-10 1115591275×845 79.9 KB

31

You can hide the text and add your own if you add this to the bottom of your card_mod section in the screenshot:

p.empty::before {
  content: "Add your text here" !important;
 }    
p.empty {
  /* There are probably more elegant ways to do this :) */
  font-size: 0 !important;
}
2 Likes
32

Where can i paste in my code please ?
I don’t find :frowning:

type: todo-list
entity: todo.courses
title: Liste de courses
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;
      }
33

It should work if you put it anyhwere under the .: | section like this for example:

card_mod:
  style:
    ha-textfield:
      $: |
        .mdc-text-field {
          margin-top: -28px;
          margin-bottom: 5px;
          height: 50px !important;
        }
        .mdc-text-field__input {
          color: white !important;
        }
    .: |
      p.empty::before {
        content: "Add your text here" !important;
      }    
      p.empty {
         font-size: 0 !important;
      }
      ha-card.type-todo-list div.header {
        display: none;
      }
      .......
34

Thanks ! It works but not possible to display custom text “add your texte here”. Everything disappear


35

Try putting font-size in the ::before section as well, like this:

      p.empty::before {
        content: "Add your text here" !important;
        font-size: 12pt !important;
       }    
      p.empty {
        /* There are probably more elegant ways to do this :) */
        font-size: 0 !important;
      }
36

Top top top, it’s ok ! Thanks :slight_smile:

1 Like
37

how do i style this “edit dialog”-box then, if possible, with card-mode and css?

38

Anyone who knows?