Slider-entity-row in a Button-card

Tags: #<Tag:0x00007f7399b1b958> #<Tag:0x00007f7399b1b840>

Hello there.

I’m trying to add a slider-entity-row inside a button-card and its not a big deal. The only problem is that the slider is stuck at the bottom of the card when it needs to occupy the entire of it.

Here’s the code:

cards:
  - cards:
      - entity: light.suite22_bathroom_mirror
        icon: 'mdi:mirror'
        name: Mirror
        size: 30px
        type: 'custom:button-card'
      - entity: light.suite22_bathroom_shower
        icon: 'mdi:spotlight-beam'
        name: Shower
        size: 30px
        type: 'custom:button-card'
    type: horizontal-stack
  - cards:
      - entity: light.suite22_bathroom_jacuzzi
        icon: 'mdi:wall-sconce-flat'
        name: Jacuzzi
        size: 30px
        custom_fields:
          slider:
            card:
              full_row: true
              hide_state: true
              type: 'custom:slider-entity-row'
              entity: light.suite22_bathroom_jacuzzi
            overflow: unset
        type: 'custom:button-card'
    type: horizontal-stack
title: Bathroom
color: black
type: vertical-stack

I also came across this post, which has the same problem, but I use its settings and it’s still the same for me. Maybe because of the size of the card, i really dont know.

If anyone knows a way to solve this, I would be completely grateful.

you need to add the custom field to the grid, otherwise it defaults to outside the grid (which happens to be the lower right corner).

      - entity: light.suite22_bathroom_jacuzzi
        icon: 'mdi:wall-sconce-flat'
        name: Jacuzzi
        size: 30px
        styles:
          grid:
          - grid-template-areas: '"i" "n" "slider"'
          - grid-template-columns: 100%
          - grid-template-rows: min-content min-content 1fr
        custom_fields:
          slider:
            card:
              full_row: true
              hide_state: true
              type: 'custom:slider-entity-row'
              entity: light.suite22_bathroom_jacuzzi
            overflow: unset
        type: 'custom:button-card'
1 Like

Yes, it was more easy than i thought, thank you so much!