diff --git a/UI/WebServerResources/js/Common/sgAutogrow.directive.js b/UI/WebServerResources/js/Common/sgAutogrow.directive.js
index 5e8e1e63c..4199eb011 100644
--- a/UI/WebServerResources/js/Common/sgAutogrow.directive.js
+++ b/UI/WebServerResources/js/Common/sgAutogrow.directive.js
@@ -19,26 +19,39 @@
*/
- sgAutogrow.$inject = ['$timeout'];
- function sgAutogrow($timeout) {
+ sgAutogrow.$inject = ['$document', '$timeout'];
+ function sgAutogrow($document, $timeout) {
return {
restrict: 'A',
link: function(scope, elem, attr) {
var textarea = elem[0];
+ var hiddenDiv = $document[0].createElement('div');
+ var content = null;
+
+ hiddenDiv.classList.add('md-input');
+ hiddenDiv.classList.add('plain-text');
+ hiddenDiv.style.display = 'none';
+ hiddenDiv.style.whiteSpace = 'pre-wrap';
+ hiddenDiv.style.wordWrap = 'break-word';
+ textarea.parentNode.appendChild(hiddenDiv);
+
+ textarea.style.resize = 'none';
+ textarea.style.overflow = 'hidden';
function AutoGrowTextArea() {
$timeout(function() {
- if (textarea.clientHeight < textarea.scrollHeight) {
- textarea.style.height = textarea.scrollHeight + 'px';
- if (textarea.clientHeight < textarea.scrollHeight) {
- textarea.style.height = (textarea.scrollHeight * 2 - textarea.clientHeight) + 'px';
- }
- }
+ content = textarea.value;
+ content = content.replace(/\n/g, '
');
+ hiddenDiv.innerHTML = content + '
';
+ hiddenDiv.style.visibility = 'hidden';
+ hiddenDiv.style.display = 'block';
+ textarea.style.height = hiddenDiv.offsetHeight + 'px';
+ console.debug('resize to ' + hiddenDiv.offsetHeight + 'px');
+ hiddenDiv.style.visibility = 'visible';
+ hiddenDiv.style.display = 'none';
});
}
- textarea.style.overflow = 'hidden';
-
elem.on('keyup', AutoGrowTextArea);
elem.on('paste', AutoGrowTextArea);
diff --git a/UI/WebServerResources/scss/views/MessageEditorUI.scss b/UI/WebServerResources/scss/views/MessageEditorUI.scss
index 56ec475de..219e98ce2 100644
--- a/UI/WebServerResources/scss/views/MessageEditorUI.scss
+++ b/UI/WebServerResources/scss/views/MessageEditorUI.scss
@@ -2,6 +2,7 @@
// Plain text editor
md-input-container .md-input.plain-text {
+ height: auto;
padding-left: $mg;
padding-right: $mg;
}