Fix mediaqueries at page load

thomasloven · Mar 16, 2021 · 85c7afe · 85c7afe
1 parent 06830c4
commit 85c7afe
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 5 deletions.
diff --git a/layout-card.js b/layout-card.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "layout-card",
-  "version": "2.1.1b0",
+  "version": "2.1.1",
   "description": "",
   "private": true,
   "scripts": {

diff --git a/src/layouts/grid.ts b/src/layouts/grid.ts
@@ -37,6 +37,7 @@ class GridLayout extends BaseLayout {
         mq.addEventListener("change", () => this._setGridStyles());
       }
     }
+    this._setGridStyles();
   }
 
   async updated(changedProperties) {

diff --git a/test/lovelace/grid-view.yaml b/test/lovelace/grid-view.yaml
@@ -7,6 +7,13 @@ layout:
     "header header header header"
     "main main . sidebar"
     "footer footer footer footer"
+  mediaquery:
+    "(max-width: 800px)":
+      grid-template-columns: 50% 50%
+      grid-template-areas: |
+        "header sidebar"
+        "main main"
+        "footer footer"
 cards:
   - type: entities
     entities:
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,6 +37,7 @@ class GridLayout extends BaseLayout { @@
             mq.addEventListener("change", () => this._setGridStyles());
           }
         }
+        this._setGridStyles();
       }
       async updated(changedProperties) {
@@ Expand Down @@