Trying to figure out how to change the height of this card

Share your Projects! Dashboards & Frontend
1

I’m using custom:button-cards and in this example, I haven’t figured out how to make the single button on the left match the height of both buttons on the right.

28%20PM
28%20PM1006×536 43 KB

Here’s my yaml. Any ideas? I’ve tried using margin-bottom on the “increment” button but that doesn’t seem to do anything.

- cards:
    - cards:
        - type: 'custom:button-card'
          entity: sensor.ac_hold_time
          show_icon: true
          icon: 'mdi:clock'
          aspect_ratio: 1/1
          show_state: false
          styles:
            card:
              - height: 200px;
      type: horizontal-stack
    - cards:
        - icon: 'mdi:menu-up'
          aspect_ratio: 2/1
          tap_action:
            action: call-service
            service: input_number.increment
            service_data:
              entity_id: input_number.ac_hold_time
          type: 'custom:button-card'
          styles:
            card:
              - height: 100px;
        - icon: 'mdi:menu-down'
          aspect_ratio: 2/1
          tap_action:
            action: call-service
            service: input_number.ac_hold_time
            service_data:
              entity_id: input_number.ac_hold_time
          type: 'custom:button-card'
          styles:
            card:
              - height: 100px;
      type: vertical-stack
  type: horizontal-stack
2

The button on the left is going to be bigger than 200px high to match. On the right you have 100px button + gap of ?px + 100px button

3

I tried multiple combinations. Couldn’t seem to figure it out.

4

Your left icon is in a nested horizontal stack, perhaps removing that up into the top horizontal stack?

5

Yeah I reckon that’s what it is. Well spotted. Try it like so:

- cards:
    - type: 'custom:button-card'
      entity: sensor.ac_hold_time
      show_icon: true
      icon: 'mdi:clock'
      aspect_ratio: 1/1
      show_state: false
      styles:
        card:
          - height: 200px;
    - cards:
        - icon: 'mdi:menu-up'
          aspect_ratio: 2/1
          tap_action:
            action: call-service
            service: input_number.increment
            service_data:
              entity_id: input_number.ac_hold_time
          type: 'custom:button-card'
          styles:
            card:
              - height: 100px;
        - icon: 'mdi:menu-down'
          aspect_ratio: 2/1
          tap_action:
            action: call-service
            service: input_number.ac_hold_time
            service_data:
              entity_id: input_number.ac_hold_time
          type: 'custom:button-card'
          styles:
            card:
              - height: 100px;
      type: vertical-stack
  type: horizontal-stack

Though the big button height still does not equal the two stacked buttons plus gap. Some adjustment may be required.

6

I’d try removing the hard coded heights in this and see what happens.

1 Like