text: fit height

application/Espo/Resources/metadata/entityDefs/Note.json

@@ -2,7 +2,7 @@
     "fields": {
         "post": {
             "type": "text",
-            "rows": 8
+            "rows": 30
         },
         "data": {
             "type": "jsonObject",

application/Espo/Resources/metadata/fields/text.json

@@ -21,7 +21,7 @@
       {
          "name": "rows",
          "type": "int",
-         "default": 4,
+         "default": 30,
          "min": 1
       },
       {

client/res/templates/fields/text/edit.tpl

@@ -1,2 +1,2 @@
 
-<textarea class="main-element form-control" name="{{name}}" {{#if params.maxLength}} maxlength="{{params.maxLength}}"{{/if}} {{#if params.rows}} rows="{{params.rows}}"{{/if}}>{{value}}</textarea>
+<textarea class="main-element form-control" name="{{name}}" {{#if params.maxLength}} maxlength="{{params.maxLength}}"{{/if}} rows="{{rows}}">{{value}}</textarea>

client/src/views/fields/text.js

@@ -46,7 +46,7 @@ Espo.define('views/fields/text', 'views/fields/base', function (Dep) {
 
         seeMoreText: false,
 
-        rowsDefault: 4,
+        rowsDefault: 10,
 
         searchTypeList: ['contains', 'startsWith', 'equals', 'endsWith', 'like', 'notContains', 'notLike', 'isEmpty', 'isNotEmpty'],
 
@@ -61,6 +61,8 @@ Espo.define('views/fields/text', 'views/fields/base', function (Dep) {
             Dep.prototype.setup.call(this);
             this.params.rows = this.params.rows || this.rowsDefault;
             this.detailMaxLength = this.params.lengthOfCut || this.detailMaxLength;
+
+            this.fitHeightDisabled = this.options.fitHeightDisabled || this.params.fitHeightDisabled || this.fitHeightDisabled;
         },
 
         setupSearch: function () {
@@ -88,6 +90,13 @@ Espo.define('views/fields/text', 'views/fields/base', function (Dep) {
                     this.searchData.value = this.searchParams.value;
                 }
             }
+            if (this.mode === 'edit') {
+                if (this.fitHeightDisabled) {
+                    this.rows = this.params.rows;
+                } else {
+                    this.rows = 1;
+                }
+            }
             return data;
         },
 
@@ -126,6 +135,30 @@ Espo.define('views/fields/text', 'views/fields/base', function (Dep) {
             return text || '';
         },
 
+        controlTextareaHeight: function (lastHeight) {
+            var scrollHeight = this.$element.prop('scrollHeight');
+            var clientHeight = this.$element.prop('clientHeight');
+
+            if (typeof lastHeight === 'undefined' && clientHeight === 0) {
+                setTimeout(this.controlTextareaHeight.bind(this), 10);
+                return;
+            }
+
+            if (clientHeight === lastHeight) return;
+
+            if (scrollHeight > clientHeight) {
+                var rows = this.$element.prop('rows');
+
+                if (this.params.rows && rows >= this.params.rows) return;
+
+                this.$element.attr('rows', rows + 1);
+                this.controlTextareaHeight(clientHeight);
+            }
+            if (this.$element.val().length === 0) {
+                this.$element.attr('rows', 1);
+            }
+        },
+
         afterRender: function () {
             Dep.prototype.afterRender.call(this);
             if (this.mode == 'edit') {
@@ -138,6 +171,13 @@ Espo.define('views/fields/text', 'views/fields/base', function (Dep) {
                 var type = this.$el.find('select.search-type').val();
                 this.handleSearchType(type);
             }
+
+            if (this.mode === 'edit' && !this.fitHeightDisabled) {
+                this.controlTextareaHeight();
+                this.$element.on('input', function () {
+                    this.controlTextareaHeight();
+                }.bind(this));
+            }
         },
 
         fetchSearch: function () {