hay
January 28, 2015, 3:01pm
1
i’d like to duplicate the way that most native messaging apps handle the text input field…that is to say when there’s only one line of text the input field is simply one line like so:
and then once you type more than one line of text in, it expands to multiple lines like this:
it usually stops at 3 lines and allows the user to scroll through any additional lines.
i have a fiddle of a similar concept, http://jsfiddle.net/2UDdh/55/ , but i fear this is incredibly inefficient and would kill performance on phones. is this possible any other way?
There are a few topics on this, maybe they will help:
Codepen direct link A couple of weeks ago I came across this awesome angular-elastic directive. I decided to integrate it into an app I am currently creating (coming out soon!). It works great with Ionic and adds that native feel to messaging...
Reading time: 8 mins 🕑
Likes: 39 ❤
2 Likes
hay
January 28, 2015, 3:37pm
3
wow thanks, @brandyshea to the rescue
2 Likes
how to achieve this in ionic2
sava999
September 1, 2016, 9:50am
5
For ionic 2, on your textarea add some id, for example:
<ion-textarea rows="1" id="messageInputBox" placeholder="Send message" (input)="change()" required></ion-textarea>
And then on change you can update size of text area:
change() {
// get elements
var element = document.getElementById('messageInputBox');
var textarea = element.getElementsByTagName('textarea')[0];
// set default style for textarea
textarea.style.minHeight = '0';
textarea.style.height = '0';
// limit size to 96 pixels (6 lines of text)
var scroll_height = textarea.scrollHeight;
if(scroll_height > 96)
scroll_height = 96;
// apply new style
element.style.height = scroll_height + "px";
textarea.style.minHeight = scroll_height + "px";
textarea.style.height = scroll_height + "px";
}
3 Likes
Hanzo
February 2, 2017, 10:53am
6
Hi, nice solution. One cuestion, how can i send the id of the input to change method?
sava999
February 2, 2017, 11:35am
7
<ion-textarea rows="1" id="messageInputBox" placeholder="Send message" (input)="change('messageInputBox')" required></ion-textarea>
change(element_id) {
...
}
?
1 Like
Hanzo
February 2, 2017, 11:37am
8
Haha, thanks! It is a fast solution. Any solution like This.id
or similar?