Combination of button-card and decluttering-card causing additional empty space

[shreram]

Checklist:

• [ x] I updated to the latest version available
• [ x] I cleared the cache of my browser

Release with the issue:
0.6.3

Last working release (if known):
N/A

Browser and Operating System:

arch	x86_64
dev	false
docker	true
hassio	false
installation_type	Home Assistant Container
os_name	Linux
os_version	4.19.107-Unraid
python_version	3.7.7
timezone	America/Chicago
version	0.111.2
virtualenv	false

Description of problem:

When I use decluttering-card with button-card and it causes additional space after each button.

If I use only button-card then no issues.

              - type: custom:decluttering-card
                template: motion_sensors_battery_square
                variables:
                  - name: Bedroom
                  - entity: binary_sensor.wyzesense_777bfd2e
                  - entity2: sensor.tmpl_wyze_br_motion_sensor_battery

              - type: 'custom:button-card'
                template: blank_card_2px_width_style

              - type: custom:decluttering-card
                template: motion_sensors_battery_square
                variables:
                  - name: Laundry
                  - entity: binary_sensor.wyzesense_77a5f319
                  - entity2: sensor.tmpl_wyze_lr_motion_sensor_battery

Javascript errors shown in the web inspector (if applicable):

No errors

Additional information:

[RomRider]

Please share the template code also (and the button card template if any).

[shreram]

Here is the decluttering template

  motion_sensors_battery_square:
    card:
      type: 'custom:button-card'
      template: motion_sensors_square_new3
      name: '[[name]]'
      entity: '[[entity]]'
      custom_fields:
        notification: >
          [[[ return states['[[entity2]]'].state + '%'; ]]]
        battery: >
          [[[
            var batval = states['[[entity2]]'].state;
            if (batval < 10) return `<ha-icon
              icon="mdi:battery-10" style="color: #FF0000;">
              </ha-icon>`
            else if (batval <= 20) return `<ha-icon
              icon="mdi:battery-20" style="color: #ff6600;">
              </ha-icon>`
            else if (batval <= 30) return `<ha-icon
              icon="mdi:battery-30" style="color: #ff9933;">
              </ha-icon>`
            else if (batval <= 40) return `<ha-icon
              icon="mdi:battery-40" style="color: #ffcc00;">
              </ha-icon>`
            else if (batval <= 50) return `<ha-icon
              icon="mdi:battery-50" style="color: #FFFF00;">
              </ha-icon>`
            else if (batval <= 60) return `<ha-icon
              icon="mdi:battery-60" style="color: #FFFF00;">
              </ha-icon>`
            else if (batval <= 70) return `<ha-icon
              icon="mdi:battery-70" style="color: #FFFF00;">
              </ha-icon>`
            else if (batval <= 80) return `<ha-icon
              icon="mdi:battery-80" style="color: #CCFF33;">
              </ha-icon>`
            else if (batval <= 90) return `<ha-icon
              icon="mdi:battery-90" style="color: #66FF33;">
              </ha-icon>`
            else return `<ha-icon icon="mdi:battery" style="color: #279b37;"></ha-icon>`
          ]]]

And button-card template:

motion_sensors_square_new3:
  template: generic_sensors_square
  show_last_changed: true
  state:
    - id: sensor_on
      icon: mdi:run-fast
    - value: "off"
      icon: mdi:run
  styles:
    label:
      - font-size: 8px
    custom_fields:
      notification:
        - border-radius: 50%
        - position: absolute
        - left: 70%
        - top: 80%
        - height: 20px
        - width: 30px # 20px
        - font-size: 12px
        - line-height: 20px
      battery:
        - border-radius: 50%
        - position: absolute
        - left: 70%
        - top: 10%
        - height: 35px
        - width: 15px
        - font-size: 10px
        - line-height: 20px

generic_sensors_square:
  name_template: >
    var sensor_name = entity.attributes.friendly_name;
    if (sensor_name.split(' ')[sensor_name.split(' ').length - 1] === 'Door') {
      var sensor_name = sensor_name.replace(' Door', '');
      return sensor_name;
    } else {
      var sensor_name = sensor_name.replace(' Window', '');
      var sensor_name = sensor_name.replace('Left', '(L)');
      var sensor_name = sensor_name.replace('Centre', '(C)');
      var sensor_name = sensor_name.replace('Right', '(R)');
      return sensor_name;
    }
  show_label: true
  show_state: true
  show_entity_picture: true
  label_template: >
    return entity.state === 'on' ? '-MOVEMENT-' : ''  ## Maybe this has to be specific for motion only, if so move it in the motion one
  size: 30%
  styles:
    card:
      - border-radius: 12px
      - width: 90px
      - height: 90px
      - padding-left: 5px
      - padding-right: 5px
      - -webkit-box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
      - box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
    name:
      - justify-self: start
      - padding-left: 3px
      - font-weight: bold
      - font-family: Helvetica
      - font-size: 12px
    label:
      - font-size: 12px
      - font-weight: bold
      - justify-self: start
    state: 
      - font-size: 10px
      - font-family: Helvetica
      - padding: 0px 10px
      - justify-self: start
      - text-transform: capitalize
      - font-weight: bold
      - padding-left: 3px
      - color: var(--button-card-light-color)
    grid:
      - grid-template-areas: '"i" "n" "s" "l"'
      - grid-template-columns: 1fr
    img_cell:
      - align-self: center
      - text-align: start
  state:
    - value: "on"
      id: sensor_on
      styles:
        lock:
          - color: red
          - opacity: 1
        state:
          - color: black
        name:
          - color: black
        label:
          - color: black
        card:
          - border: 2px solid rgb(164,33,75)
          - --paper-card-background-color: rgb(254, 239, 179)
          - box-shadow: 0px 0px 10px 3px var(--paper-card-background-color)  
        icon:
          - color: black
    - value: "off"
      styles:
        lock:
          - color: red
          - opacity: 1
        state:
          - color: red
        card:
          - box-shadow: 0px 0px 8px 2px var(--secondary-text-color)
          - border: 0px 0px 10px 3px rgba(130,70,70,0.75)
  tap_action:
    action: none
  hold_action:
    action: none

[RomRider]

Thanks.
This is something I can't fix but you can :)

The width of the decluttering-card is defined by the parent horizontal-stack (automatically, it's a flexbox) but you have set the width and height of the button-card in pixels.

Instead replace your width and height of the button-card with aspect_ration: 1/1. You'll still have square buttons and they will auto-adapt to the size. If you want to have an empty space in a line use: color_type: blank-card.

[shreram]

darn it. I tried using aspect_ratio: 1/1 in the base template 'generic_sensors_square' and commented out width: 90px height: 90px but the buttons are rather big.

How do I prevent that?

[RomRider]

You can add invisible buttons on the left (like 2 for eg) to reduce the overall size:

type: custom:button-card
color_type: blank-card

setting width and height should be only used in very specific case as it completely breaks when used with different devices. That's why aspect_ratio was introduced as it respects how lovelace works

[shreram]

Bingo! Thank you for the explanation. I thought earlier behavior was due to combination of both cards. I will update all other button-cards with the same aspect_ratio.

          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                template: blank_card_2px_width_style

              - type: custom:decluttering-card
                template: motion_sensors_battery_square
                variables:
                  - name: Bedroom
                  - entity: binary_sensor.wyzesense_777bfd2e
                  - entity2: sensor.tmpl_wyze_br_motion_sensor_battery

              - type: 'custom:button-card'
                template: blank_card_2px_width_style

              - type: custom:decluttering-card
                template: motion_sensors_battery_square
                variables:
                  - name: Laundry
                  - entity: binary_sensor.wyzesense_77a5f319
                  - entity2: sensor.tmpl_wyze_lr_motion_sensor_battery

              - type: custom:button-card
                color_type: blank-card
              - type: custom:button-card
                color_type: blank-card
              - type: custom:button-card
                color_type: blank-card

[shreram]

Looks like this setup messed up on mobile device. Do I have to setup differently for mobile devices?

[RomRider]

Text never scales automatically but there are some tricks that you can use:
See here: https://css-tricks.com/books/fundamental-css-tactics/scale-typography-screen-size/

Welcome to the amazing (or not) world of web development 😉

[shreram]

                 Welcome to the amazing (or not) world of web development

oh, no. Its CSS. Run Forrest Run.. :)

[bzellman]

I just ran against this myself.

I've added CSS Card Mod via HACS and then just floated the button as needed.

ex:

decluttering_templates:
  group_toggle_button:
    card:
      type: "custom:button-card"
      entity: "[[entity]]"
      show_label: false
      state_color: true
      show_name: false
      color_type: icon
      color: rgb(145, 226, 237)
      icon: mdi:power
      tap_action:
        action: toggle
      styles:
        card:
          - height: 40px
          - width: 75px
          - border-radius: 8px
      style: |
        :host{
          padding-top: 7px;
          float: right;
        }

Went from:

To This: