Auto Growing Textarea In Ionic
Solution 1:
The answer above does not shrink - here is an improved version:
https://codepen.io/benshope/pen/xOPvpm
angular.module('app').directive('expandingTextarea', function () {
return {
restrict: 'A',
controller: function ($scope, $element, $attrs, $timeout) {
$element.css('min-height', '0');
$element.css('resize', 'none');
$element.css('overflow-y', 'hidden');
setHeight(0);
$timeout(setHeightToScrollHeight);
functionsetHeight(height) {
$element.css('height', height + 'px');
$element.css('max-height', height + 'px');
}
functionsetHeightToScrollHeight() {
setHeight(0);
var scrollHeight = angular.element($element)[0]
.scrollHeight;
if (scrollHeight !== undefined) {
setHeight(scrollHeight);
}
}
$scope.$watch(function () {
return angular.element($element)[0].value;
}, setHeightToScrollHeight);
}
};
});
This will transform all your textareas to grow/shrink.
Hope that helps!
Solution 2:
I wrote a very simple directive that works with Ionic 2 and ion-textarea
. Here it is:
import { Directive, HostListener, ElementRef } from"@angular/core";
@Directive({
selector: "ion-textarea[autoresize]"// Attribute selector
})
exportclassAutoresize {
@HostListener("input", ["$event.target"])
onInput(textArea: HTMLTextAreaElement): void {
this.adjust();
}
constructor(public element: ElementRef) {
}
ngOnInit(): void {
this.adjust();
}
adjust(): void {
let ta = this.element.nativeElement.querySelector("textarea");
ta.style.overflow = "hidden";
ta.style.height = "auto";
ta.style.height = ta.scrollHeight + "px";
}
}
Here is a gist: https://gist.github.com/maxt3r/2485356e91a1969bdb6cf54902e61165
EDIT: Look at the gist for other suggestions from other people.
Solution 3:
I found a much more better way to do this without using any other third party library or directive.
$scope.updateEditor = function() {
var element = document.getElementById("page_content");
element.style.height = element.scrollHeight + "px";
};
Then simply adding ng-keypress="updateEditor()" to the textarea would do the job.
<textareang-keypress="updateEditor()"ng-model="bar"></textarea>
I Hope this helps others who might face this problem in the future.
Update: Here is a codepen for this: http://codepen.io/kpourdeilami/pen/KDepk
Update 2: Use the snippet provided by @benshope
Update 3: If you're on Ionic/Angular 2, use the answer provided by "Max Al Farakh"
Solution 4:
Try Angular-Elastic. It is an angular directive built to auto-expand a textarea. Use bower to install it.
bower install angular-elastic
add it to your project, then you can use it as an attribute
<textareamsd-elasticng-model="foo"></textarea>
or as class
<textareaclass="msd-elastic"ng-model="bar"></textarea>
Solution 5:
From Ionic 4.4 it's built-in, see the autoGrow
property:
<ion-textareaauto-grow="true"rows="1"></ion-textarea>
Post a Comment for "Auto Growing Textarea In Ionic"