diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index 5ea1d05f82..06ea2fb30b 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -11,12 +11,12 @@
       <de-out-widget
         v-if="config.type==='custom'"
         :id="'component' + config.id"
+        ref="deOutWidget"
         class="component-custom"
         :style="getComponentStyleDefault(config.style)"
         style="overflow: hidden"
         :out-style="config.style"
         :is-relation="isRelation"
-        ref="deOutWidget"
         :element="config"
         :in-screen="inScreen"
         :edit-mode="'preview'"
@@ -156,7 +156,7 @@ export default {
       return style
     },
     componentActiveFlag() {
-      return (this.curComponent && this.config === this.curComponent && !this.previewVisible  && !this.showPosition.includes('email-task')) || this.showPosition.includes('multiplexing')
+      return (this.curComponent && this.config === this.curComponent && !this.previewVisible && !this.showPosition.includes('email-task')) || this.showPosition.includes('multiplexing')
     },
     curGap() {
       return (this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix) ? this.componentGap : 0
@@ -255,9 +255,9 @@ export default {
       this.previewVisible = false
     },
     getCondition() {
-      if(this.$refs.deOutWidget && this.$refs.deOutWidget.getCondition) {
+      if (this.$refs.deOutWidget && this.$refs.deOutWidget.getCondition) {
         return this.$refs.deOutWidget.getCondition()
-      }else {
+      } else {
         return null
       }
     }
diff --git a/frontend/src/components/widget/DeWidget/DeButton.vue b/frontend/src/components/widget/DeWidget/DeButton.vue
index c3c9c4fb80..055b9a0fcf 100644
--- a/frontend/src/components/widget/DeWidget/DeButton.vue
+++ b/frontend/src/components/widget/DeWidget/DeButton.vue
@@ -6,6 +6,7 @@
     :round="element.options.attrs.round"
     :plain="element.options.attrs.plain"
     :size="size"
+    class="de-search-button"
     @click="triggerSearch"
   >
     {{ element.options.value }}
@@ -44,5 +45,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.de-search-button {
+  height: 100%;
+  width: 100%;
+}
 </style>