Lovelace gauge stack overlapping

Configuration
1

Hello,
Please take a look at this. These are two lovelace gauge cards, doing almost the same thing, except that the above card (with the overlapping bars), has conditions in it (This is the card I want to use). Why are the gauges overlapping and not resized properly?

Thank you…

image
image763×746 33.3 KB

This is the code from the first card:

cards:
  - cards:
      - card:
          entity: sensor.homeserver_cpu_usage
          name: CPU homeserver
          type: gauge
          severity:
            green: 0
            red: 85
            yellow: 45
          theme: default
        conditions:
          - entity: switch.homeserver
            state: 'on'
        type: conditional
        tap_action:
          action: none
        hold_Action:
          action: more-info
      - card:
          entity: sensor.homeserver_ram_usage
          name: ram homeserver
          type: gauge
          severity:
            green: 0
            red: 85
            yellow: 45
        conditions:
          - entity: switch.homeserver
            state: 'on'
        type: conditional
        tap_action:
          action: none
        hold_Action:
          action: none
      - card:
          entity: sensor.homeserver_hdd_free_d
          name: free hdd
          type: gauge
          max: 867
          severity:
            green: 0
            red: 20
            yellow: 50
        conditions:
          - entity: switch.homeserver
            state: 'on'
        type: conditional
        tap_action:
          action: none
        hold_Action:
          action: none
    type: horizontal-stack
  - cards:
      - card:
          entity: sensor.gateway_cpu_usage
          name: cpu gateway
          type: gauge
          severity:
            green: 0
            red: 85
            yellow: 45
        conditions:
          - entity: switch.gateway
            state: 'on'
        hold_action:
          action: more-info
        tap_action:
          action: toggle
        type: conditional
      - card:
          entity: sensor.gateway_ram_usage
          name: ram gateway
          type: gauge
          severity:
            green: 0
            red: 85
            yellow: 45
        conditions:
          - entity: switch.gateway
            state: 'on'
        hold_action:
          action: more-info
        tap_action:
          action: toggle
        type: conditional
      - card:
          entity: sensor.gateway_hdd_free_c
          max: 256
          min: 0
          name: hdd gateway
          severity:
            green: 0
            red: 20
            yellow: 50
          type: gauge
        conditions:
          - entity: switch.gateway
            state: 'on'
        hold_action:
          action: more-info
        tap_action:
          action: toggle
        type: conditional
    type: horizontal-stack
type: vertical-stack

And this is the second card:

cards:
  - cards:
      - entity: sensor.homeserver_cpu_usage
        max: 100
        min: 0
        name: cpu homeserver
        severity:
          green: 0
          red: 85
          yellow: 45
        theme: default
        type: gauge
      - entity: sensor.homeserver_ram_usage
        max: 100
        min: 0
        name: ram homeserver
        severity:
          green: 0
          red: 80
          yellow: 60
        theme: default
        type: gauge
      - entity: sensor.homeserver_hdd_free_d
        max: 867
        min: 0
        name: hdd homeserver
        severity:
          green: 0
          red: 20
          yellow: 50
        theme: default
        type: gauge
    conditions:
      - entity: switch.homeserver
        state: 'on'
    type: horizontal-stack
  - cards:
      - entity: sensor.gateway_cpu_usage
        max: 100
        min: 0
        name: cpu gatewy
        severity:
          green: 50
          red: 0
          yellow: 30
        theme: default
        type: gauge
      - entity: sensor.gateway_ram_usage
        max: 100
        min: 0
        name: ram gateway
        severity:
          green: 50
          red: 0
          yellow: 30
        theme: default
        type: gauge
      - entity: sensor.gateway_hdd_free_c
        max: 256
        min: 0
        name: hdd gateway
        severity:
          green: 0
          red: 20
          yellow: 50
        theme: default
        type: gauge
    type: horizontal-stack
type: vertical-stack
2

I’m guessing that you need to load these cards in the correct order. Right now, lovelace is loading them all at once and with your conditionals, it doesn’t know what the size will be. You should investigate incorporating the card loader custom card.

This custom card will allow you to load things in a specific order.