Bugfix/1938/multi line input overlaps latest messages

js/views/chatview.js

@@ -78,12 +78,28 @@
 			});
 
 			_.bindAll(this, '_onAutoComplete');
+
+			 document.addEventListener('resize', function(event) {
+				 console.log(event.detail.prevFormHeight)
+				  this.handleFormResize(event.detail.prevFormHeight) 
+				})
+
+		},
+
+		handleFormResize : function (prevFormHeight) {
+			var formHeight = document.getElementsByClassName('newCommentForm')[0].clientHeight;
+			//console.log('Initial form heigth: ' + prevFormHeight + ', actual form height: ' + formHeight)
+			if (prevFormHeight < formHeight) {
+			this._virtualList.scrollToLastVisibleElement();
+			}
 		},
 
 		setRoom: function(model) {
 			this.model = model;
 		},
 
+
+
 		_initAutoComplete: function($target) {
 			var s = this;
 			var limit = 20;
@@ -661,6 +677,11 @@
 		},
 
 		_onTypeComment: function(ev) {
+
+			var prevFormHeight = document.getElementsByClassName('newCommentForm')[0].clientHeight
+			var newMessageFieldResized = new CustomEvent('resize', { detail : { prevFormHeight : prevFormHeight }});
+			document.dispatchEvent(newMessageFieldResized);
+
 			var $field = $(ev.target);
 			var $submitButton = $field.data('submitButtonEl');
 			if (!$submitButton) {

js/views/virtuallist.js

@@ -427,26 +427,32 @@
 			this._setWrapperBackgroundHeight(0);
 
 			this._loadInitialElements($initialElement);
+
+			this.scrollToLastVisiBleElement();
+
+			this.updateVisibleElements();
+
+			this._queueLoadOfPendingElements();
+		},
+
+		scrollToLastVisibleElement: function() {
 
 			// Scroll to the last visible element, or to the top of the next one
 			// to prevent it from becoming the last visible element when the
 			// visibilities are updated.
-			if ($initialElement._next) {
+			if (this._$lastVisibleElement._next) {
 				// The implicit "Math.floor()" on the scroll position when the
 				// browser has subpixel accuracy but uses int positions for
 				// scrolling ensures that the next element to the last visible
 				// one will not become visible (which could happen if the value
 				// was rounded instead).
-				this._$container.scrollTop($initialElement._next._top - this._getElementOuterHeightWithoutMargins(this._$container));
+				this._$container.scrollTop(this._$lastVisibleElement._next._top - this._getElementOuterHeightWithoutMargins(this._$container));
 			} else {
 				// As the last visible element is also the last element this
 				// simply scrolls the list to the bottom.
-				this._$container.scrollTop($initialElement._top + $initialElement._height);
+				this._$container.scrollTop(this._$lastVisibleElement._top + this._$lastVisibleElement._height);
 			}
 
-			this.updateVisibleElements();
-
-			this._queueLoadOfPendingElements();
 		},
 
 		_loadInitialElements: function($initialElement) {