Conditional card padding when inactive

Configuration Frontend
1

On our dashboard we use a fair amount of conditional cards to show/hide status’ of things at a glance.

That works fine, but when inactive cards are hidden the conditional card still leaves behind formatted padding which creates gaps in the dashboard.

Is there a way to hide these properly so that the formatting remains true?
I’ve seen a few entries in GitHub about this, but they’re all closed due to inactivity on them. Perhaps there’s a workaround to fix it?

e.g.
Formatting with conditionals hidden:

image
image603×718 58.4 KB

What’s under the hood:

image
image564×1176 99.9 KB

Example conditional card (forcing left padding):

type: horizontal-stack
cards:
  - type: conditional
    conditions:
      - condition: state
        entity: sensor.proxmox1_cpu
        state: unavailable
    card:
      type: custom:button-card
      name: Proxmox Offline
      styles:
        grid:
          - position: relative
          - position: absolute
          - font-weight: bold
          - font-size: 26px
          - color: '#ccc'
      card_mod:
        style: |
          ha-card {
            box-shadow: none;
            background: rgba(120,40,20,1);
            text-align: center;
            margin: 0px 0px 0px 0px;
          }
  - type: conditional
    conditions:
      - condition: state
        entity: sensor.proxmox1_cpu
        state_not: unavailable
    card:
      type: horizontal-stack
      cards:
        - type: gauge
          entity: sensor.proxmox1_cpu
          min: 0
          max: 100
          severity:
            green: 0
            yellow: 40
            red: 75
          needle: false
          name: Prox1 CPU
        - type: gauge
          entity: sensor.proxmox1_cpu_temp
          min: 0
          max: 100
          severity:
            green: 15
            yellow: 51
            red: 65
          needle: false
          name: Prox1 Temp
        - type: gauge
          entity: sensor.proxmox1_ram
          min: 0
          max: 100
          severity:
            green: 0
            yellow: 90
            red: 95
          needle: false
          name: Prox1 RAM
2

It is probably some card_mod setting that is missing, but I find it often a bit confusing to find the correct ones.
I have this in my cards, but no idea, if it will help here.

      style: |
        ha-card {
          box-shadow: none;
          border: none;
          margin: 0;
        }
        ha-markdown.no-header {
          box-shadow: none;
          padding: 0 0 0 16px;
          border: none;
          margin: 0;
        }
3

Gaps caused by conditional cards - a known bug for conditional card (which was auto-closed but not solved).

1 Like
4

Ta.
I tried iterations of your examples, but it didn’t change the layout.
Worth a go tho :slight_smile:

5

I hadn’t seen that one before, but saw a few others that had the same result - closed but not solved

6

I will probably recreate this issue. It is rather important.

1 Like