Working on Mobile Dashboard and having issues with spacing

Configuration Frontend
1

Hello,

I’m working on a dashboard for mobile phones and am having issues with spacing that is driving me crazy. It seems when I use the Vertical Stack In Card I get different results on the spacing of the different cards.

For example, I’m trying to include Mushroom Title cards in each grouping of my devices. For my Alarm System and Door Locks that works fine and the spacing looks normal, but for my door contacts it puts each entity on top of each other with no spacing between each. I want it to look like my window group entities, but with the title like it is in the door group. Any ideas on how to do this? Here is the yaml for my door group card.

image
image514×979 60 KB

image
image520×887 39.9 KB

Thanks!

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: Doors
    subtitle: ""
    title_tap_action:
      action: none
    subtitle_tap_action:
      action: none
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Front Door
        secondary: |-
          {% if is_state('binary_sensor.front_door_contact_template', 'off') %}
            Closed
          {% elif is_state('binary_sensor.front_door_contact_template', 'on') %}
            Open
          {% else %}
          {{ states('binary_sensor.front_door_contact_template') }}
          {% endif %}
        icon: >-
          {% if is_state('binary_sensor.front_door_contact_template', 'off') %}

          mdi:door

          {% elif is_state('binary_sensor.front_door_contact_template', 'on' )
          %}

          mdi:door-open

          {% else %} 

          mdi:help-circle

          {% endif %}
        entity: binary_sensor.front_door_contact_template
        icon_color: >-
          {% if is_state('binary_sensor.front_door_contact_template', 'off' ) %}

          green

          {% elif is_state('binary_sensor.front_door_contact_template', 'on' )
          %}

          red

          {% else %}

          orange

          {% endif %}
        layout: horizontal
        tap_action:
          action: more-info
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-template-card
        primary: Garage Door
        secondary: >-
          {% if is_state('binary_sensor.mudroom_door_contact_template', 'off')
          %}
            Closed
          {% elif is_state('binary_sensor.mudroom_door_contact_template', 'on')
          %}
            Open
          {% else %}

          {{ states('binary_sensor.mudroom_door_contact_template') }}

          {% endif %}
        icon: >-
          {% if is_state('binary_sensor.mudroom_door_contact_template', 'off')
          %}

          mdi:door

          {% elif is_state('binary_sensor.mudroom_door_contact_template', 'on' )
          %}

          mdi:door-open

          {% else %} 

          mdi:help-circle

          {% endif %}
        entity: binary_sensor.mudroom_door_contact_template
        icon_color: >-
          {% if is_state('binary_sensor.mudroom_door_contact_template', 'off' )
          %}

          green

          {% elif is_state('binary_sensor.mudroom_door_contact_template', 'on' )
          %}

          red

          {% else %}

          orange

          {% endif %}
        layout: horizontal
        tap_action:
          action: more-info
        hold_action:
          action: none
        double_tap_action:
          action: none
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Deck Door
        secondary: |-
          {% if is_state('binary_sensor.deck_door_contact_template', 'off') %}
            Closed
          {% elif is_state('binary_sensor.deck_door_contact_template', 'on') %}
            Open
          {% else %}
          {{ states('binary_sensor.deck_door_contact_template') }}
          {% endif %}
        icon: |-
          {% if is_state('binary_sensor.deck_door_contact_template', 'off') %}
          mdi:door
          {% elif is_state('binary_sensor.deck_door_contact_template', 'on' ) %}
          mdi:door-open
          {% else %} 
          mdi:help-circle
          {% endif %}
        entity: binary_sensor.deck_door_contact_template
        icon_color: |-
          {% if is_state('binary_sensor.deck_door_contact_template', 'off' ) %}
          green
          {% elif is_state('binary_sensor.deck_door_contact_template', 'on' ) %}
          red
          {% else %}
          orange
          {% endif %}
        layout: horizontal
        tap_action:
          action: more-info
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-template-card
        primary: Basement Door
        secondary: >-
          {% if is_state('binary_sensor.basement_door_contact_template', 'off')
          %}
            Closed
          {% elif is_state('binary_sensor.basement_door_contact_template', 'on')
          %}
            Open
          {% else %}

          {{ states('binary_sensor.basement_door_contact_template') }}

          {% endif %}
        icon: >-
          {% if is_state('binary_sensor.basement_door_contact_template', 'off')
          %}

          mdi:door

          {% elif is_state('binary_sensor.basement_door_contact_template', 'on'
          ) %}

          mdi:door-open

          {% else %} 

          mdi:help-circle

          {% endif %}
        entity: binary_sensor.basement_door_contact_template
        icon_color: >-
          {% if is_state('binary_sensor.basement_door_contact_template', 'off' )
          %}

          green

          {% elif is_state('binary_sensor.basement_door_contact_template', 'on'
          ) %}

          red

          {% else %}

          orange

          {% endif %}
        layout: horizontal
        tap_action:
          action: more-info
        hold_action:
          action: none
        double_tap_action:
          action: none
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Single Garage Door
        secondary: >-
          Hold to Operate: 

          {% if is_state('binary_sensor.aqara_contact_garage_door_single',
          'off') %}
            Closed
          {% elif is_state('binary_sensor.aqara_contact_garage_door_single',
          'on') %}
            Open
          {% else %}

          {{ states('binary_sensor.aqara_contact_garage_door_single') }}

          {% endif %}
        icon: >-
          {% if is_state('binary_sensor.aqara_contact_garage_door_single',
          'off') %}

          mdi:garage

          {% elif is_state('binary_sensor.aqara_contact_garage_door_single',
          'on' ) %}

          mdi:garage-open

          {% else %} 

          mdi:help-circle

          {% endif %}
        entity: binary_sensor.aqara_contact_garage_door_single
        icon_color: >-
          {% if is_state('binary_sensor.aqara_contact_garage_door_single', 'off'
          ) %}

          green

          {% elif is_state('binary_sensor.aqara_contact_garage_door_single',
          'on' ) %}

          red

          {% else %}

          orange

          {% endif %}
        layout: horizontal
        tap_action:
          action: more-info
        hold_action:
          action: call-service
          service: switch.turn_on
          target:
            entity_id: switch.single_garage_door_relay
          data: {}
        double_tap_action:
          action: none
        multiline_secondary: false
      - type: custom:mushroom-template-card
        primary: Double Garage Door
        secondary: >-
          Hold to Operate: 

          {% if is_state('binary_sensor.aqara_contact_garage_door_double',
          'off') %}
            Closed
          {% elif is_state('binary_sensor.aqara_contact_garage_door_double',
          'on') %}
            Open
          {% else %}

          {{ states('binary_sensor.aqara_contact_garage_door_double') }}

          {% endif %}
        icon: >-
          {% if is_state('binary_sensor.aqara_contact_garage_door_double',
          'off') %}

          mdi:garage-variant

          {% elif is_state('binary_sensor.aqara_contact_garage_door_double',
          'on' ) %}

          mdi:garage-open-variant

          {% else %} 

          mdi:help-circle

          {% endif %}
        entity: binary_sensor.aqara_contact_garage_door_double
        icon_color: >-
          {% if is_state('binary_sensor.aqara_contact_garage_door_double', 'off'
          ) %}

          green

          {% elif is_state('binary_sensor.aqara_contact_garage_door_double',
          'on' ) %}

          red

          {% else %}

          orange

          {% endif %}
        layout: horizontal
        tap_action:
          action: more-info
        hold_action:
          action: call-service
          service: switch.turn_on
          target:
            entity_id: switch.double_garage_door_relay
          data: {}
        double_tap_action:
          action: none
2

use grid card instead of horizontal. set to 2 columns and square false

3

I tried a grid card on the “Alarm Relays” group. Now the entities don’t take up the whole horizontal space and there is still no vertical padding between them and the end of the Vertical Stack in Card.

image
image550×546 27 KB

4

CleanShot 2025-04-17 at 15.41.05
CleanShot 2025-04-17 at 15.41.051014×845 98.7 KB

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Hello, {{ user }} !
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-template-card
        primary: Hello, {{user}}
        secondary: How are you?
        icon: mdi:home
      - type: custom:mushroom-template-card
        primary: Hello, {{user}}
        secondary: How are you?
        icon: mdi:home
      - type: custom:mushroom-template-card
        primary: Hello, {{user}}
        secondary: How are you?
        icon: mdi:home
      - type: custom:mushroom-template-card
        primary: Hello, {{user}}
        secondary: How are you?
        icon: mdi:home
      - type: custom:mushroom-template-card
        primary: Hello, {{user}}
        secondary: How are you?
        icon: mdi:home
      - type: custom:mushroom-template-card
        primary: Hello, {{user}}
        secondary: How are you?
        icon: mdi:home
    columns: 2

with custom vertical stack card

CleanShot 2025-04-17 at 15.43.20
CleanShot 2025-04-17 at 15.43.20504×264 3.99 KB

1 Like
5

First, thank you for the help, I appreciate it. But that still isn’t quite what I’m looking for. In your last image, that is spot on, except there is no padding/spacing below the very last row of the grid.

6

Well, then use custom layout card…

1 Like