Saving a Card Removes Needed Indent

Configuration Frontend
1

Hello All,

I am trying to recreate the card in this post.

My Code is as follows:

type: custom:mod-card
card_mod:
   style:
    hui-vertical-stack-card $: |
      div#root > * {
        --ha-card-border-width: 0px;
      }
   .: |
    hui-vertical-stack-card {
      --vertical-stack-card-margin: 0px;
    }
    ha-card {
      box-shadow: var(--ha-card-box-shadow);
      border: var(--ha-card-border-color,var(--divider-color,#e0e0e0)) solid var(--ha-card-border-width,1px);
    }
card:
  type: vertical-stack
  cards:
    - type: entities
      entities:
        - sun.sun
    - type: entities
      entities:
        - sun.sun

I can see with the preview that it works before I save. But after I save the rows with the “style:” and “.: |” lines lose an indent and the css doesn’t take effect.

This is the resulting code:

type: custom:mod-card
card_mod:
  style:
    hui-vertical-stack-card $: |
      div#root > * {
        --ha-card-border-width: 0px;
      }
  .: |
    hui-vertical-stack-card {
      --vertical-stack-card-margin: 0px;
    }
    ha-card {
      box-shadow: var(--ha-card-box-shadow);
      border: var(--ha-card-border-color,var(--divider-color,#e0e0e0)) solid var(--ha-card-border-width,1px);
    }
card:
  type: vertical-stack
  cards:
    - type: entities
      entities:
        - sun.sun
    - type: entities
      entities:
        - sun.sun

Any help would be appreciated!

2

I would suggest using the vertical-stack-in-card

image
image1052Ă—294 7.48 KB

type: custom:vertical-stack-in-card
cards:
    - type: entities
      entities:
        - sun.sun
        - sun.sun
3

that looks perfect, thanks!

1 Like