@syncfusion/ej2-inputs 34.2.2 → 34.2.6

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 34.2.2
+*  version : 34.2.6
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-inputs",
-  "version": "34.2.2",
+  "version": "34.2.6",
   "description": "A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,10 +8,10 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-inputs.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~34.2.2",
-    "@syncfusion/ej2-buttons": "~34.2.2",
-    "@syncfusion/ej2-popups": "~34.2.2",
-    "@syncfusion/ej2-splitbuttons": "~34.2.2"
+    "@syncfusion/ej2-base": "~34.2.6",
+    "@syncfusion/ej2-buttons": "~34.2.6",
+    "@syncfusion/ej2-popups": "~34.2.6",
+    "@syncfusion/ej2-splitbuttons": "~34.2.6"
   },
   "devDependencies": {},
   "keywords": [

package/src/input/input.js

@@ -40,6 +40,7 @@ export var Input;
     };
     var floatType;
     var isBindClearAction = true;
+    var resizeHandlers = new Map();
     /**
      * Create a wrapper to input element with multiple span elements and set the basic properties to input based components.
      * ```
@@ -462,6 +463,11 @@ export var Input;
             _internalRipple(false, null, args.buttons);
         }
         unwireFloatingEvents(args.element);
+        var resizeHandler = resizeHandlers.get(args.element);
+        if (resizeHandler) {
+            window.removeEventListener('resize', resizeHandler);
+            resizeHandlers.delete(args.element);
+        }
         if (!isNullOrUndefined(args.element)) {
             delete args.element.__eventHandlers;
             if (args.element.classList.contains(CLASSNAMES.INPUT)) {
@@ -582,10 +588,30 @@ export var Input;
      * @param {HTMLElement} container - The parent element which is need to get the label span to calculate width
      */
     function calculateWidth(element, container, moduleName) {
+        if (moduleName !== 'multiselect' && element && container && !resizeHandlers.has(element)) {
+            var resizeHandler_1 = function () {
+                if (!document.documentElement.contains(container)) {
+                    window.removeEventListener('resize', resizeHandler_1);
+                    resizeHandlers.delete(element);
+                    return;
+                }
+                calculateWidth(element, container, moduleName);
+            };
+            resizeHandlers.set(element, resizeHandler_1);
+            window.addEventListener('resize', resizeHandler_1);
+        }
         if (moduleName !== 'multiselect' && !_isElementVisible(element)) {
             return;
         }
         var elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'), 10);
+        if (moduleName !== 'multiselect' && element && container) {
+            var iconWidth_1 = 0;
+            var icons = container.getElementsByClassName('e-input-group-icon');
+            Array.from(icons).forEach(function (icon) {
+                iconWidth_1 += icon.clientWidth + parseInt(getComputedStyle(icon, null).getPropertyValue('margin-right'), 10);
+            });
+            elementWidth = elementWidth + (iconWidth_1 - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'), 10));
+        }
         if (!isNullOrUndefined(container) && !isNullOrUndefined(container.getElementsByClassName('e-float-text-content')[0])) {
             if (container.getElementsByClassName('e-float-text-content')[0].classList.contains('e-float-text-overflow')) {
                 container.getElementsByClassName('e-float-text-content')[0].classList.remove('e-float-text-overflow');

package/src/numerictextbox/numerictextbox.d.ts

@@ -54,6 +54,7 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     private prependedElement;
     private appendedElement;
     private iconTemplateFunction;
+    private resizeHandler;
     /**
      * Gets or Sets the CSS classes to root element of the NumericTextBox which helps to customize the
      * complete UI styles for the NumericTextBox component.
@@ -355,6 +356,7 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     private keyPressHandler;
     private numericRegex;
     private mouseWheel;
+    private windowResize;
     private focusHandler;
     private focusOutHandler;
     private mouseDownOnSpinner;

package/src/numerictextbox/numerictextbox.js

@@ -495,6 +495,8 @@ var NumericTextBox = /** @class */ (function (_super) {
                 EventHandler.add(this.formEle, 'reset', this.resetFormHandler, this);
             }
         }
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
     };
     NumericTextBox.prototype.wireSpinBtnEvents = function () {
         /* bind spin button events */
@@ -517,6 +519,10 @@ var NumericTextBox = /** @class */ (function (_super) {
         if (this.formEle) {
             EventHandler.remove(this.formEle, 'reset', this.resetFormHandler);
         }
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
     };
     NumericTextBox.prototype.unwireSpinBtnEvents = function () {
         /* unbind spin button events */
@@ -1043,6 +1049,9 @@ var NumericTextBox = /** @class */ (function (_super) {
         }
         this.cancelEvent(event);
     };
+    NumericTextBox.prototype.windowResize = function () {
+        this.updateFloatLabelOverflowWidth();
+    };
     NumericTextBox.prototype.focusHandler = function (event) {
         var _this = this;
         clearTimeout(selectionTimeOut);

package/src/textarea/textarea.d.ts

@@ -25,6 +25,7 @@ export declare class TextArea extends Component<HTMLTextAreaElement> implements
     private prependedElement;
     private appendedElement;
     private iconTemplateFn;
+    private resizeHandler;
     /**
      * Specifies the boolean value whether the TextArea allows user to change the text.
      *
@@ -247,6 +248,7 @@ export declare class TextArea extends Component<HTMLTextAreaElement> implements
      * @returns {void}
      */
     destroy(): void;
+    private windowResize;
     private focusHandler;
     private focusOutHandler;
     protected keydownHandler(args: KeyboardEvent): void;

package/src/textarea/textarea.js

@@ -494,6 +494,8 @@ var TextArea = /** @class */ (function (_super) {
             EventHandler.add(this.formElement, 'reset', this.resetForm, this);
         }
         this.bindClearEvent();
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
     };
     TextArea.prototype.unWireEvents = function () {
         EventHandler.remove(this.element, 'focus', this.focusHandler);
@@ -504,6 +506,10 @@ var TextArea = /** @class */ (function (_super) {
         if (this.isForm) {
             EventHandler.remove(this.formElement, 'reset', this.resetForm);
         }
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
     };
     /**
      * Removes the component from the DOM and detaches all its related event handlers.
@@ -542,6 +548,9 @@ var TextArea = /** @class */ (function (_super) {
         }
         _super.prototype.destroy.call(this);
     };
+    TextArea.prototype.windowResize = function () {
+        this.updateFloatLabelOverflowWidth();
+    };
     TextArea.prototype.focusHandler = function (args) {
         var eventArgs = {
             container: this.textareaWrapper.container,

package/styles/fluent2-lite.css

@@ -2185,8 +2185,8 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
   font-size: 14px;
   top: -28px;
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.92);
-          transform: translate3d(0, 6px, 0) scale(0.92);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.92);
+          transform: translate3d(-8px, 6px, 0) scale(0.92);
 }
 
 .e-float-input.e-small textarea:focus ~ label.e-float-text,
@@ -2407,8 +2407,8 @@ textarea.e-input.e-small.e-rtl,
 .e-small .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.86);
+          transform: translate3d(-8px, 6px, 0) scale(0.86);
 }
 
 .e-float-input textarea[disabled],

package/styles/fluent2.css

@@ -2185,8 +2185,8 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
   font-size: 14px;
   top: -28px;
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.92);
-          transform: translate3d(0, 6px, 0) scale(0.92);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.92);
+          transform: translate3d(-8px, 6px, 0) scale(0.92);
 }
 
 .e-float-input.e-small textarea:focus ~ label.e-float-text,
@@ -2407,8 +2407,8 @@ textarea.e-input.e-small.e-rtl,
 .e-small .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.86);
+          transform: translate3d(-8px, 6px, 0) scale(0.86);
 }
 
 .e-float-input textarea[disabled],
@@ -6905,8 +6905,8 @@ textarea.e-input.e-bigger.e-small,
 .e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.86);
+          transform: translate3d(-8px, 6px, 0) scale(0.86);
 }
 
 .e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
@@ -6933,8 +6933,8 @@ textarea.e-input.e-bigger.e-small,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.86);
+          transform: translate3d(-8px, 6px, 0) scale(0.86);
 }
 
 .e-input-group.e-bigger textarea,

package/styles/input/_bigger.scss

@@ -2088,7 +2088,15 @@
   .e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      transform: translate3d(0, 6px, 0) scale(.86);
+      @if $input-skin-name == 'fluent2'{
+        transform: translate3d(-8px, 6px, 0) scale(.86);
+      }
+      @else if $input-skin-name == 'tailwind3'{
+        transform: translate3d(-10px, 6px, 0) scale(.86);
+      }
+      @else{
+        transform: translate3d(0, 6px, 0) scale(.86);
+      }
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
       font-style: $input-font-normal;
@@ -2142,7 +2150,15 @@
   .e-small.e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-small.e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      transform: translate3d(0, 6px, 0) scale(.86);
+      @if $input-skin-name == 'fluent2'{
+        transform: translate3d(-8px, 6px, 0) scale(.86);
+      }
+      @else if $input-skin-name == 'tailwind3'{
+        transform: translate3d(-10px, 6px, 0) scale(.86);
+      }
+      @else{
+        transform: translate3d(0, 6px, 0) scale(.86);
+      }
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
       font-style: $input-font-normal;

package/styles/input/_layout.scss

@@ -2432,7 +2432,16 @@
     font-size: $float-label-font-size;
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: $textarea-float-top;
-      transform: translate3d(0, 6px, 0) scale(.92);
+      @if $input-skin-name == 'fluent2'{
+        transform: translate3d(-8px, 6px, 0) scale(.92);
+      }
+      @else if $input-skin-name == 'tailwind3'{
+        transform: translate3d(-10px, 6px, 0) scale(.92);
+      }
+      @else{
+        transform: translate3d(0, 6px, 0) scale(.92);
+      }
+
       @if $input-skin-name == 'tailwind3' {
         left: 2px;
       }
@@ -2859,7 +2868,15 @@
   .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      transform: translate3d(0, 6px, 0) scale(.86);
+      @if $input-skin-name == 'fluent2'{
+        transform: translate3d(-8px, 6px, 0) scale(.86);
+      }
+      @else if $input-skin-name == 'tailwind3'{
+        transform: translate3d(-10px, 6px, 0) scale(.86);
+      }
+      @else{
+        transform: translate3d(0, 6px, 0) scale(.86);
+      }
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
       font-style: $input-font-normal;

package/styles/input/fluent2.css

@@ -2175,8 +2175,8 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
   font-size: 14px;
   top: -28px;
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.92);
-          transform: translate3d(0, 6px, 0) scale(0.92);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.92);
+          transform: translate3d(-8px, 6px, 0) scale(0.92);
 }
 
 .e-float-input.e-small textarea:focus ~ label.e-float-text,
@@ -2397,8 +2397,8 @@ textarea.e-input.e-small.e-rtl,
 .e-small .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.86);
+          transform: translate3d(-8px, 6px, 0) scale(0.86);
 }
 
 .e-float-input textarea[disabled],
@@ -6895,8 +6895,8 @@ textarea.e-input.e-bigger.e-small,
 .e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.86);
+          transform: translate3d(-8px, 6px, 0) scale(0.86);
 }
 
 .e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
@@ -6923,8 +6923,8 @@ textarea.e-input.e-bigger.e-small,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.86);
+          transform: translate3d(-8px, 6px, 0) scale(0.86);
 }
 
 .e-input-group.e-bigger textarea,

package/styles/input/tailwind3.css

@@ -1848,8 +1848,8 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
   font-size: 12px;
   top: -24px;
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.92);
-          transform: translate3d(0, 6px, 0) scale(0.92);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.92);
+          transform: translate3d(-10px, 6px, 0) scale(0.92);
   left: 2px;
 }
 
@@ -1998,8 +1998,8 @@ textarea.e-input.e-small.e-rtl,
 .e-small .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.86);
+          transform: translate3d(-10px, 6px, 0) scale(0.86);
 }
 
 .e-float-input textarea[disabled],
@@ -6499,8 +6499,8 @@ textarea.e-input.e-bigger.e-small,
 .e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.86);
+          transform: translate3d(-10px, 6px, 0) scale(0.86);
 }
 
 .e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
@@ -6527,8 +6527,8 @@ textarea.e-input.e-bigger.e-small,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.86);
+          transform: translate3d(-10px, 6px, 0) scale(0.86);
 }
 
 .e-input-group.e-bigger textarea,

package/styles/tailwind3-lite.css

@@ -1860,8 +1860,8 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
   font-size: 12px;
   top: -24px;
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.92);
-          transform: translate3d(0, 6px, 0) scale(0.92);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.92);
+          transform: translate3d(-10px, 6px, 0) scale(0.92);
   left: 2px;
 }
 
@@ -2010,8 +2010,8 @@ textarea.e-input.e-small.e-rtl,
 .e-small .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.86);
+          transform: translate3d(-10px, 6px, 0) scale(0.86);
 }
 
 .e-float-input textarea[disabled],

package/styles/tailwind3.css

@@ -1860,8 +1860,8 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
   font-size: 12px;
   top: -24px;
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.92);
-          transform: translate3d(0, 6px, 0) scale(0.92);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.92);
+          transform: translate3d(-10px, 6px, 0) scale(0.92);
   left: 2px;
 }
 
@@ -2010,8 +2010,8 @@ textarea.e-input.e-small.e-rtl,
 .e-small .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.86);
+          transform: translate3d(-10px, 6px, 0) scale(0.86);
 }
 
 .e-float-input textarea[disabled],
@@ -6511,8 +6511,8 @@ textarea.e-input.e-bigger.e-small,
 .e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.86);
+          transform: translate3d(-10px, 6px, 0) scale(0.86);
 }
 
 .e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
@@ -6539,8 +6539,8 @@ textarea.e-input.e-bigger.e-small,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.86);
+          transform: translate3d(-10px, 6px, 0) scale(0.86);
 }
 
 .e-input-group.e-bigger textarea,