Shopping List - How to disable/hide the clear completed button/icon

[fantangelo]

I have a use case for the built in Shopping list integration where our family members can all contribute to our Thanksgiving dinner. Family members can select the dish that they want to bring by including their name on the item of their choice and then click on the checkbox. This is working well. The problem is that I do not want them to inadvertently click on the ‘Clear checked items’ button as this will delete those items. I can delete them myself with a service call.

I have spent hours trying to use custom js code to disable or hide that button to no avail. I have also tried card-mod and also modifying the shopping list integration as a custom_component with no success as my programming skills are limited. I don’t need to submit a FR as I see this as a limited use case. Any ideas are appreciated.

[brewston (Tim Jones)]

I saw someone else complain about that - Shopping list deleted with one icon? - #3 by megapint - I guess I didn’t understand the use case. Yours makes sense.

You could (But I’ve not tried) have one card which displays the list and another which takes a text input and then adds that item to the list. And not actually use the shopping list card.

Actually I have the first one :

type: custom:mushroom-entity-card
  entity: sensor.shopping_list
  icon: fas:shopping-basket
  name: ' '
  card_mod:
    style: |
      ha-card 
      {
      --chip-font-size: 0.8em;
      --chip-height: 50px;

      }

[fantangelo]

Thanks for the idea but I do like all of the shopping list features like add, edit, remove items which I would have to recreate.

[fantangelo]

I have found a way to do this with card-mod that works perfectly as follows:

type: shopping-list
card_mod:
  style: |
    :host .clearall {
      color: var(--disabled-text-color);
      --paper-item-icon-color: var(--disabled-text-color);
      pointer-events: none;
    }

[brewston (Tim Jones)]

@megapint ^^^ lookee here ^^^

[megapint]

EDIT: This requires the following to be installed in Home Assistant:

HACS
card-mod, using HACS interface.

Thanks, this absolutely does the trick. And the card-mod looks like a powerful option foor me to play around with!

Cheers

[FragMenthor (Pedro Roque)]

This worked for me, after 2024.2, added section ha-card.type-todo-list div.header:

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!

[wendevlin (Wendelin)]

Hi,
there will be an option in 2024.11:

Add hide completed option to hui-todo-list-card