From 8c7b62509b0e86d417cc41aa8bc23cd013f7ae3d Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Thu, 25 Oct 2018 12:29:05 +0200
Subject: [PATCH] Fix stack card getSize (#1856)

---
 .../lovelace/cards/hui-vertical-stack-card.ts | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-vertical-stack-card.ts b/src/panels/lovelace/cards/hui-vertical-stack-card.ts
index 4629552a2f..502655c827 100644
--- a/src/panels/lovelace/cards/hui-vertical-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-vertical-stack-card.ts
@@ -12,6 +12,7 @@ interface Config extends LovelaceConfig {
 
 class HuiVerticalStackCard extends LitElement implements LovelaceCard {
   protected config?: Config;
+  private _cards?: LovelaceCard[];
   private _hass?: HomeAssistant;
 
   static get properties() {
@@ -22,15 +23,24 @@ class HuiVerticalStackCard extends LitElement implements LovelaceCard {
 
   set hass(hass: HomeAssistant) {
     this._hass = hass;
-    for (const el of this.shadowRoot!.querySelectorAll("#root > *")) {
-      const element = el as LovelaceCard;
+
+    if (!this._cards) {
+      return;
+    }
+
+    for (const element of this._cards) {
       element.hass = this._hass;
     }
   }
 
   public getCardSize() {
     let totalSize = 0;
-    for (const element of this.shadowRoot!.querySelectorAll("#root > *")) {
+
+    if (!this._cards) {
+      return totalSize;
+    }
+
+    for (const element of this._cards) {
       totalSize += computeCardSize(element);
     }
 
@@ -42,6 +52,11 @@ class HuiVerticalStackCard extends LitElement implements LovelaceCard {
       throw new Error("Card config incorrect");
     }
     this.config = config;
+    this._cards = config.cards.map((card) => {
+      const element = createCardElement(card) as LovelaceCard;
+      element.hass = this._hass;
+      return element;
+    });
   }
 
   protected render() {
@@ -52,7 +67,7 @@ class HuiVerticalStackCard extends LitElement implements LovelaceCard {
     return html`
       ${this.renderStyle()}
       <div id="root">
-        ${this.config.cards.map((card) => this.createCardElement(card))}
+        ${this._cards!}
       </div>
     `;
   }
@@ -76,12 +91,6 @@ class HuiVerticalStackCard extends LitElement implements LovelaceCard {
       </style>
     `;
   }
-
-  private createCardElement(card: LovelaceConfig): LovelaceCard {
-    const element = createCardElement(card) as LovelaceCard;
-    element.hass = this._hass;
-    return element;
-  }
 }
 
 declare global {