move scroll right

apps/spreadsheeteditor/main/app/controller/CellEditor.js

@@ -83,6 +83,7 @@ define([
             this.api.isCEditorFocused = false;
             this.api.asc_registerCallback('asc_onSelectionNameChanged', _.bind(this.onApiCellSelection, this));
             this.api.asc_registerCallback('asc_onEditCell', _.bind(this.onApiEditCell, this));
+            this.api.asc_registerCallback('asc_onEditorSelectionChanged', _.bind(this.onCellEditorTextChange, this));
             this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onApiDisconnect,this));
             Common.NotificationCenter.on('api:disconnect', _.bind(this.onApiDisconnect, this));
             Common.NotificationCenter.on('cells:range', _.bind(this.onCellsRange, this));
@@ -128,10 +129,15 @@ define([
 
             this.editor.btnNamedRanges.menu.on('item:click', _.bind(this.onNamedRangesMenu, this))
                                            .on('show:before', _.bind(this.onNameBeforeShow, this));
+            $(window).on('resize', _.bind(this.onCellEditorTextChange, this));
             this.namedrange_locked = false;
             this.isUserProtected = false;
         },
 
+        onCellEditorTextChange:function (){
+            this.editor.cellEditorTextChange();
+        },
+
         onApiEditCell: function(state) {
             if (this.viewmode) return; // signed file
 
@@ -154,7 +160,7 @@ define([
 
         onApiSelectionChanged: function(info) {
             if (this.viewmode || !info) return; // signed file
-
+            this.onCellEditorTextChange();
             var seltype = info.asc_getSelectionType(),
                 coauth_disable = (!this.mode.isEditMailMerge && !this.mode.isEditDiagram && !this.mode.isEditOle) ? (info.asc_getLocked() === true || info.asc_getLockedTable() === true || info.asc_getLockedPivotTable()===true) : false;
 
@@ -246,7 +252,7 @@ define([
                 this.editor.$btnexpand['addClass']('btn-collapse');
                 Common.localStorage.setBool('sse-celleditor-expand', true);
             }
-            
+            this.onCellEditorTextChange();
             Common.NotificationCenter.trigger('layout:changed', 'celleditor');
             Common.NotificationCenter.trigger('edit:complete', this.editor, {restorefocus:true});
         },

apps/spreadsheeteditor/main/app/view/CellEditor.js

@@ -70,6 +70,7 @@ define([
             this.$cellname = $('#ce-cell-name', this.el);
             this.$btnexpand = $('#ce-btn-expand', this.el);
             this.$btnfunc = $('#ce-func-label', this.el);
+            this.$cellcontent = $('#ce-cell-content', this.el);
 
             var me = this;
             this.$cellname.on('focus', function(e){
@@ -112,6 +113,13 @@ define([
             }
         },
 
+        cellEditorTextChange: function (){
+            if(!this.$cellcontent) return;
+            this.$cellcontent.height('');
+            this.$cellcontent.outerHeight(this.$cellcontent[0].scrollHeight);
+            this.$btnexpand.parent().outerHeight(this.$cellcontent.outerHeight());
+        },
+
         tipFormula: 'Insert Function',
         textManager: 'Manager'
     }, SSE.Views.CellEditor || {}));

apps/spreadsheeteditor/main/resources/less/celleditor.less

@@ -6,6 +6,24 @@
     min-height: 20px;
     background-color: @background-toolbar-ie;
     background-color: @background-toolbar;
+    .custom-scrollbar();
+    position: relative;
+
+    &::-webkit-scrollbar-button:single-button{
+        height: 9px;
+        background-size: 6px;
+        background-position: center;
+        &:vertical:decrement {
+            background-position-y: calc(1px + @scaled-one-px-value);
+        }
+    }
+    &::-webkit-scrollbar-thumb{
+        min-height: 20px;
+        height: 20px;
+    }
+    &::-webkit-scrollbar{
+        height: 18px;
+    }
 
     .ce-group-name {
         height: 20px;
@@ -13,6 +31,7 @@
         //border-bottom: @scaled-one-px-value solid @border-toolbar;
         background-color: @background-toolbar-ie;
         background-color: @background-toolbar;
+        position: fixed;
 
         #ce-cell-name {
             width: 100px;
@@ -100,13 +119,17 @@
     .ce-group-expand {
         //height: 20px;
         height: 100%;
+        min-height: 100%;
         background-color: @background-normal-ie;
         background-color: @background-normal;
+        position: relative;
+        .padding-right(16px);
     }
 
     .ce-group-content {
         margin: 0 16px 0 120px;
         height: 100%;
+        min-height: 19px;
         border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
         border-left: @scaled-one-px-value solid @border-toolbar;
 
@@ -120,23 +143,12 @@
         #ce-cell-content {
             height: 100%;
             resize: none;
-            min-height: 19px;
+            min-height: 100%;
             border: 0 none;
             .font-size-medium();
             line-height: 18px;
             padding-bottom: 0;
-            &::-webkit-scrollbar-button:single-button{
-                height: 9px;
-                background-size: 6px;
-                background-position: center;
-            }
-            &::-webkit-scrollbar-thumb{
-                min-height: 20px;
-                height: 20px;
-            }
-            &::-webkit-scrollbar{
-                height: 18px;
-            }
+            overflow: hidden;
 
             &[disabled] {
                 color: @border-preview-select-ie;
@@ -170,6 +182,7 @@
     .border-radius(0);
     background: transparent;
     padding: 0 2px 0;
+    position: fixed;
 
     .caret {
         transition: transform .2s;