#2 Make iframe more responsive

InteractionDesignFoundation · Jan 22, 2020 · f626508 · f626508
1 parent c7f5ef5
commit f626508
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
@@ -18,13 +18,12 @@
 
                 <unlayer-editor
                     class="form-input-bordered"
+                    :style="{minHeight: containerHeight}"
                     ref="editor"
                     @load="editorLoaded"
-                    :minHeight=editorHeight
                     :locale=field.config.locale
                     :projectId=field.config.projectId
                     :templateId="field.value ? null : field.config.templateId"
-                    :style="{height: editorHeight}"
                     :options=field.config
                 />
             </div>
@@ -36,7 +35,7 @@
     import EmailEditor from './UnlayerEditor'
     import { FormField, HandlesValidationErrors } from 'laravel-nova'
 
-    const defaultHeight = '500px';
+    const defaultHeight = '700px';
 
     export default {
         mixins: [FormField, HandlesValidationErrors],
@@ -48,7 +47,7 @@
         props: ['resourceName', 'resourceId', 'field'],
 
         computed: {
-            editorHeight() {
+            containerHeight: function () {
                 return this.field.height || defaultHeight;
             },
         },

diff --git a/resources/js/components/UnlayerEditor.vue b/resources/js/components/UnlayerEditor.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :id=id class="flex h-full" :style="{ minHeight: minHeight }"></div>
+    <div :id=id class="flex h-full unlayerIframeContainer"></div>
 </template>
 
 <script>
@@ -17,10 +17,6 @@
                 type: String,
                 default: 'email',
             },
-            minHeight: {
-                type: String,
-                default: '500px',
-            },
             id: {
                 type: String,
                 default: 'editor',
@@ -84,3 +80,19 @@
         },
     }
 </script>
+
+<!--Please don't use "scoped" option: it doesn't work with responsible iframe containers-->
+<style>
+    .unlayerIframeContainer {
+        position: relative;
+    }
+
+    .unlayerIframeContainer > iframe {
+        border: 0;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+</style>