Fix dialog responsiveness (#143)

* Fix dialog height in small viewport (#142) * Fix index-material.html not loading data.js * Fix dialog responsiveness
vaadin · Nov 8, 2018 · 3d0b106 · 3d0b106
1 parent 223fbc3
commit 3d0b106
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/demo/index-material.html b/demo/index-material.html
@@ -12,13 +12,17 @@
   <script src="../../vaadin-demo-helpers/vaadin-demo-ready-event-emitter.js"></script>
 
   <script src="./crud-demo.js"></script>
+  <script src="./data.js"></script>
 
   <link rel="import" href="../theme/material/vaadin-crud.html">
   <link rel="import" href="../../vaadin-text-field/theme/material/vaadin-password-field.html">
   <link rel="import" href="../../vaadin-combo-box/theme/material/vaadin-combo-box.html">
   <link rel="import" href="../../vaadin-notification/theme/material/vaadin-notification.html">
   <link rel="import" href="../../iron-icon/iron-icon.html">
   <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../vaadin-material-styles/typography.html">
+  <link rel="import" href="../../vaadin-material-styles/color.html">
+  <link rel="import" href="../../vaadin-material-styles/icons.html">
 
   <custom-style>
     <style include="vaadin-component-demo-shared-styles"></style>

diff --git a/theme/vaadin-dialog-layout-overlay-styles.html b/theme/vaadin-dialog-layout-overlay-styles.html
@@ -11,10 +11,10 @@
         display: flex;
         flex-direction: column;
         padding: 0;
+        max-height: 100vh;
       }
 
-      :host([theme~="layout"]) [part="content"] {
-        flex: auto;
+      :host([theme~="layout"]) [part="overlay"] {
         max-width: 54em;
         min-width: 20em;
       }
@@ -29,10 +29,14 @@
         }
 
         :host([theme~="layout"]) [part="overlay"] {
-          flex: 1;
-          width: 100%;
+          height: 100vh;
+          width: 100vw;
           border-radius: 0 !important;
         }
+
+        :host([theme~="layout"]) [part="content"] {
+          flex: 1;
+        }
       }
     </style>
   </template>