diff --git a/src/components/ha-cards.html b/src/components/ha-cards.html
index f75cd47fcf..ab0d9a02d0 100644
--- a/src/components/ha-cards.html
+++ b/src/components/ha-cards.html
@@ -51,7 +51,7 @@
       }
     </style>
 
-    <div class='main'>
+    <div id='main'>
       <template is='dom-if' if='[[cards.badges]]'>
         <div class='badges'>
           <template is='dom-if' if='[[cards.demo]]'>
@@ -184,7 +184,13 @@
       orderedGroups
     ) {
       if (!panelVisible || !viewVisible) {
+        if (this.$.main.parentNode) {
+          this.$.main._parentNode = this.$.main.parentNode;
+          this.$.main.parentNode.removeChild(this.$.main);
+        }
         return;
+      } else if (!this.$.main.parentNode && this.$.main._parentNode) {
+        this.$.main._parentNode.appendChild(this.$.main);
       }
       this._debouncer = Polymer.Debouncer.debounce(
         this._debouncer,
@@ -198,14 +204,19 @@
       );
     }
 
-    computeCards(columns, states, orderedGroups) {
-      const hass = this.hass;
-
-      const cards = {
+    emptyCards() {
+      return {
         demo: false,
         badges: [],
         columns: [],
       };
+    }
+
+    computeCards(columns, states, orderedGroups) {
+      const hass = this.hass;
+
+      const cards = this.emptyCards();
+
       const entityCount = [];
       for (let i = 0; i < columns; i++) {
         cards.columns.push([]);