Lovelace: Button card

Try adding

    - grid-template-rows: auto

The icon is there is the size of the rows the problem

Perfect, now it works!!
Thanks.

1 Like

Hello forum! :star2:

I hope you’re all having a fantastic day. I’ve hit a bit of a snag with customizing the tooltip and was wondering if you could lend me a hand. I’ve been trying to add a personal touch using HTML, but it seems it’s not being interpreted correctly. Any ideas on how to fix this? :thinking:

To keep things simple, I also tried adding line breaks with \n, but to no avail. What I’m aiming for is to display a list in a readable manner. Here’s the code I’ve been working with for both attempts:

with HTML:

- type: custom:button-card
  icon: mdi:sprout
  tooltip: >
    [[[
      var problems = "<ul>";
      var entities = ['plant.ficus', 'plant.filodendro_variegado'];
      entities.forEach(function(entity) {
        if (states[entity].state == 'problem') {
          problems += "<li>" + states[entity].attributes.friendly_name + "</li>";
        }
      });
      problems += "</ul>";
      return problems != "<ul></ul>" ? problems : "" ;
    ]]]

without HTML:

- type: custom:button-card
  icon: mdi:sprout
  tooltip: >
    [[[
      var problems = "";
      var entities = ['plant.ficus', 'plant.filodendro_variegado'];
      entities.forEach(function(entity) {
        if (states[entity].state == 'problem') {
          problems += "- " + states[entity].attributes.friendly_name + "\n";
        }
      });
      return problems != "" ? problems : "";
    ]]]

Any guidance will be greatly appreciated. Thanks in advance for your help! :blush:

Best regards, [A HTML Enthusiast]

Hello guys

I nerd your help to modify my code because I am not able to modify slider card to select temp with range of 0,1 ºC instead of 1ºC.

In my entity I setup it steps of 0,1 but with the slider only works grade to grade

I hope you can help me:
image

title: Hall
cards:
  - type: horizontal-stack
    cards:
      - type: custom:slider-button-card
        entity: input_number.temperatura_hall
        slider:
          direction: left-right
          background: gradient
          use_state_color: false
          use_percentage_bg_opacity: true
          show_track: false
          toggle_on_click: false
          force_square: false
          min: 21
          max: 25
        icon:
          show: true
          use_state_color: true
          tap_action:
            action: none
        action_button:
          show: false
          show_name: true
        show_attribute: true
        show_state: true
        compact: false
        name: Temp. Deseada
      - type: custom:button-card
        entity: light.colector_hall_entrada
        icon: mdi:heating-coil
        label: |
          [[[
            if (states['light.colector_hall_entrada'].state === "on")
            return "Apagado";
            else if (states['light.colector_hall_entrada'].state === "off")
            return "Encendido";
          ]]]
        state:
          - value: 'on'
            color: rgb(70, 116, 156)
          - value: 'off'
            color: rgb(253, 192, 47)
        show_label: true
        styles:
          icon:
            - width: 50px
            - height: 60px
        name: Suelo Radiante
  - type: vertical-stack
    cards:
      - type: custom:mini-graph-card
        name: Temperatura y Humedad
        decimals: 1
        font_size_header: 15
        height: 18
        tap_action: false
        entities:
          - entity: sensor.termostato_pasillo_pb_temperatura
            name: Temperatura
            show_state: true
            color: orange
            state_adaptive_color: true
            show_legend: true
            show_graph: false
            icon: mdi:thermometer
            show_icon: false
          - entity: sensor.termostato_pasillo_pb_humedad
            name: Humedad
            show_state: true
            color: lightblue
            state_adaptive_color: true
            show_legend: true
            show_graph: false
            icon: mdi:water-percent
            show_icon: false
            line_color: blue
            line_width: 7
            font_size: 60

Hello folks,
I am looking for a way to display the next waste in a button card.
I have a sensor that always shows the next waste in the first attribute (see picture)
I don’t understand how to display the first attribute in the card.
I already have the days until the next waste is collected.

image

  #################################################
  #                                                                                              #
  #                   Kopfzeile                                                            #
  #                                                                                              #
  #################################################

  - type: horizontal-stack
    view_layout:
      grid-area: kopfzeile
    cards:
      - type: custom:button-card
        name: '[[[ return `<ha-icon icon="mdi:recycle"> </ha-icon> Abfall in ${ states[''sensor.abfallnaechster''].state } Tagen ` ]]]'
        template:
          - footer