diff --git a/public/css/element.css b/public/css/element.css
index 74a3e2a04..8da234a6a 100644
--- a/public/css/element.css
+++ b/public/css/element.css
@@ -12246,6 +12246,7 @@
     position: absolute;
     z-index: 10;
     padding: 6px;
+    left: 341px !important;
     -webkit-box-sizing: content-box;
     box-sizing: content-box;
     background-color: #FFF;
@@ -15316,17 +15317,14 @@
 }
 
 /*--------Import Components--------*/
-
-
 .el-color-picker__icon
 {
     padding-left: 16px;
     padding-top: 5px;
 }
 
-.el-color-dropdown.el-color-picker__panel
-{
-    left: 341px !important;
+.template-color-picker {
+    left: 492px !important;
 }
 
 .el-color-picker__color
diff --git a/resources/views/modals/settings/invoice_template.blade.php b/resources/views/modals/settings/invoice_template.blade.php
index 877c51640..305ebf7ca 100644
--- a/resources/views/modals/settings/invoice_template.blade.php
+++ b/resources/views/modals/settings/invoice_template.blade.php
@@ -49,7 +49,7 @@
                     <div class="input-group input-group-merge" id="invoice-color-picker">
                         <div class="input-group-prepend">
                             <span class="input-group-text">
-                                <el-color-picker v-model="invoice_form.color" size="mini" :predefine="predefineColors" @change="onChangeColor"></el-color-picker>
+                                <el-color-picker popper-class="template-color-picker" v-model="invoice_form.color" size="mini" :predefine="predefineColors" @change="onChangeColor"></el-color-picker>
                             </span>
                         </div>
                         {!! Form::text('color', $setting['color'], ['v-model' => 'invoice_form.color', '@input' => 'onChangeColorInput', 'id' => 'color', 'class' => 'form-control color-hex', 'required' => 'required']) !!}