Fix height

Author: dark-flames

src/components/InputArea.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="input-area">
+    <div id="mp-input-area">
         <codemirror
                 :value="code"
                 :options="editorOption"
@@ -9,6 +9,12 @@
     </div>
 </template>
 
+<style>
+    #mp-input-area {
+        overflow: auto;
+    }
+</style>
+
 <script>
 import {codemirror} from 'vue-codemirror-lite'
 import 'codemirror/mode/markdown/markdown.js'
@@ -22,12 +28,11 @@ export default {
         editorOption: {
             type: Object
         },
-        height: {
-            type: String,
-            default: '400px'
-        },
         insertCode: {
             default: null
+        },
+        height: {
+            type: String
         }
     },
     computed: {
@@ -58,11 +63,11 @@ export default {
 
             this.$emit('finish')
         },
-        height (newHeight) {
-            this.editor.setSize('100%', newHeight)
-        },
         value (newValue) {
             this.code = newValue
+        },
+        height (newHeight) {
+            this.editor.setSize('100%', newHeight)
         }
     },
     data: function () {

src/components/MarkdownPalettes.vue

@@ -4,25 +4,24 @@
             <toolbar @change="insert" @click="clickToolbar" @input="handleToolbarOperation"
                      :toolbarConfig="editorConfig.toolbarConfig" ref="toolbar"></toolbar>
         </div>
-        <div id="mp-editor-area">
-            <div id="mp-editor-input-area" class="mp-input-area" :class="{
+        <div id="mp-editor-area" :style="{ height: editorHeight }">
+            <div id="mp-editor-input-area" class="mp-editor-area mp-input-area" :class="{
                         'mp-editor-area': this.config.previewDisplay === 'normal',
                         'mp-editor-area-full': this.config.previewDisplay === 'hide'
                  }">
                 <input-area v-model="code"
                             ref="inputArea"
                             @input="updateCode"
                             @finish="insertCode = null"
-                            :height="editorHeight"
                             :insertCode="insertCode"
+                            :height="editorHeight"
                             :editorOption="editorConfig.editorOption"></input-area>
             </div>
             <div id="mp-editor-preview-area" class="mp-editor-area mp-preview-area" :class="{
                         'mp-editor-area': this.config.previewDisplay === 'normal',
                         'mp-editor-area-hide': this.config.previewDisplay === 'hide'
                 }">
-                <preview-area v-model="code" :height="editorHeight"
-                              :parsers="editorConfig.parsers" ref="previewArea"></preview-area>
+                <preview-area v-model="code" :parsers="editorConfig.parsers" ref="previewArea"></preview-area>
             </div>
         </div>
         <div id="mp-editor-dialog">
@@ -36,7 +35,9 @@
     .mp-editor-area {
         box-sizing: border-box;
         width: 50%;
+        height: 100%;
         float: left;
+        overflow: auto;
         border-bottom: 1px solid #ddd;
         border-top: 1px solid #ddd;
     }
@@ -58,6 +59,7 @@
 
     .mp-preview-area {
         border-right: 1px solid #ddd;
+        padding-bottom: 2px;
     }
 
     .mp-fullscreen {

src/components/PreviewArea.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="mp-preview-area" :style="{ 'height': height }">
+    <div id="mp-preview-area">
         <div id="mp-preview-content" v-html="content"></div>
     </div>
 </template>
@@ -16,6 +16,7 @@
     #mp-preview-area {
         overflow: auto;
         background-color: white;
+        height: 100%;
     }
 
     #mp-preview-content table {
@@ -49,10 +50,6 @@ export default {
             type: String,
             default: ''
         },
-        height: {
-            type: String,
-            default: '400px'
-        },
         parsers: {
             type: Array
         }