vertical-stack-in-card icon indicating copy to clipboard operation
vertical-stack-in-card copied to clipboard

Space appearing between different entities

Open drthanwho opened this issue 4 years ago • 5 comments

Hi guys,

I am using vertical-stack-in-card in conjunction with horizontal-card and button-card. At first it seemed to work just perfect, but now it will occasionally display the entities with gaps in between like so:

image image

Here is an example of the setup with one entity:

type: 'custom:vertical-stack-in-card'
cards:
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        color_type: card
        entity: binary_sensor.pir_sensor
        show_last_changed: true
        size: 50%
        styles:
          name:
            - font-size: 12px
            - font-weight: bold
          label:
            - font-size: 12px
        state:
          - value: 'on'
            color: yellow
            icon: 'mdi:motion-sensor'
            styles:
              card:
                - animation: blink 2s linear infinite
          - operator: default
            color: null
            icon: 'mdi:motion-sensor'

drthanwho avatar Jan 05 '20 18:01 drthanwho

I’ve noticed extra spacing between the title at the top and the entities below compared to ‘regular’ cards.

vertical-stack-in-card

Would be great if this was fixed, or if we could be able to tweak the padding ourselves.

jonohunt avatar Apr 06 '20 18:04 jonohunt

Yup I'm seeing this as well and it's not with all the cards either. Below is what i'm seeing, i've noticed this with entity-filter cards and a few others.

image

type: 'custom:vertical-stack-in-card'
cards:
  - entities:
      - entity: input_boolean.modem_reboot
        icon: 'mdi:access-point'
        name: Modem Reboot
      - entity: input_boolean.router_reboot
        icon: 'mdi:router-wireless'
        name: Router Reboot
    show_header_toggle: false
    title: System Status
    type: entities
  - type: thermostat
    entity: climate.dining_room
  - type: entity-filter
    entities:
      - sensor.front_door_keypad_battery
      - sensor.water_battery_level
    state_filter:
      - operator: '>'
        value: 50
  - type: entities
    entities:
      - entity: sensor.dark_sky_precip_probability_0d
      - entity: sensor.dark_sky_apparent_temperature

ttaidapos avatar Apr 28 '20 13:04 ttaidapos

I managed to get around this (mostly) by playing around with the padding, removing the shadow etc.

- type: custom:vertical-stack-in-card
  cards:
    - type: entities
      title: "Xbox One"
      show_header_toggle: false
      entities:
        - entity: sensor.xbox_username
    - type: picture-entity
      style: |
        ha-card {
          background: none;
          box-shadow: none;
          padding-top: 0;
          padding-bottom: 15px;
          padding-left: 15px;
          padding-right: 15px;
        }
      entity: sensor.xbox_currently_playing

jonohunt avatar Apr 28 '20 14:04 jonohunt

Could not work around this. Looks quite seperate and not really good :-(

grafik

bcutter avatar Dec 28 '20 18:12 bcutter

I have the same problem (I use Google Dark Theme)

5894EF4E-A012-477B-B4BA-C1E5DE5BBF6D

5D339CED-46EB-43F0-8BFA-C108F03714D4 509B405D-BC6D-4AFB-93AE-E9ABA897E26F

KameDomotics avatar Jan 08 '21 16:01 KameDomotics