diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index 7bcaac1c3e..7a6e9092ab 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -15,6 +15,7 @@
       :out-style="config.style"
       :element="config"
       :in-screen="inScreen"
+      :edit-mode="'preview'"
       :h="config.style.height"
     />
     <component
diff --git a/frontend/src/components/dataease/DeOutWidget.vue b/frontend/src/components/dataease/DeOutWidget.vue
index 081e402d0d..c08686c29e 100644
--- a/frontend/src/components/dataease/DeOutWidget.vue
+++ b/frontend/src/components/dataease/DeOutWidget.vue
@@ -44,6 +44,7 @@
 
 <script>
 import elementResizeDetectorMaker from 'element-resize-detector'
+import { mapState } from 'vuex'
 export default {
   name: 'DeOutWidget',
   props: {
@@ -63,6 +64,11 @@ export default {
     h: {
       type: Number,
       default: 50
+    },
+    editMode: {
+      type: String,
+      require: false,
+      default: 'edit'
     }
   },
   data() {
@@ -70,26 +76,30 @@ export default {
       inputMaxSize: 46,
       inputLargeSize: 42,
       inputSmallSize: 38,
-      inputMiniSize: 34,
+      inputMiniSize: 32,
       options: null,
       showNumber: false,
-      mainClass: ''
+      mainClass: '',
+      mainHeight: 75,
+      duHeight: 46
     }
   },
   computed: {
     sizeInfo() {
       let size
-      if (this.h > this.inputMaxSize) {
-        return size
-      } else if (this.h > this.inputLargeSize) {
+      if (this.duHeight > this.inputMaxSize) {
+      } else if (this.duHeight > this.inputLargeSize) {
         size = 'medium'
-      } else if (this.h > this.inputSmallSize) {
+      } else if (this.duHeight > this.inputSmallSize) {
         size = 'small'
       } else {
         size = 'mini'
       }
       return size
-    }
+    },
+    ...mapState([
+      'curCanvasScale'
+    ])
   },
   mounted() {
     this.watchSize()
@@ -102,12 +112,16 @@ export default {
     watchSize() {
       const erd = elementResizeDetectorMaker()
       erd.listenTo(this.$refs.myContainer, ele => {
+        const deContentContainer = this.$refs.deContentContainer
+        const height = ele.offsetHeight
+        this.mainHeight = height
         if (!this.element.options.attrs.title) {
+          this.duHeight = this.mainHeight
+          deContentContainer.style.marginLeft = '0px'
           return
         }
-        const height = ele.offsetHeight
         const titleWidth = this.$refs.deTitle.offsetWidth
-        const deContentContainer = this.$refs.deContentContainer
+        this.duHeight = height - titleWidth
         this.$nextTick(() => {
           let min = this.element.style.fontSize * 2 + 50
           if (this.element.component === 'de-number-range') {
diff --git a/frontend/src/views/panel/filter/filterMain/FilterControl.vue b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
index 02a0ad3e20..0560e88138 100644
--- a/frontend/src/views/panel/filter/filterMain/FilterControl.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
@@ -67,6 +67,8 @@
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
   name: 'FilterControl',
   props: {
@@ -116,7 +118,7 @@ export default {
     showTitleChange(value) {
       if (!value) {
         this.attrs.title = ''
-        // this.componentInfo.style.backgroundColor = ''
+        this.element.style.backgroundColor = ''
       }
       this.fillAttrs2Filter()
     },