I'm trying to change the height of a textarea according to its scrollheight.
This works fine the first time i change the height however i got to a scenario where it doesn't work for me, I've made jsFiddle to show what i'm doing and what's going wrong.
Step by step explanation of jsfiddle scenario:
1: Click button1 and check the current scrollheight.
2: Click button3 and then button1 and notice that the scrollheight value has decreased.
3: Click button2 and then button1 and notice that the scrollheight value is back again.
You can switch back and forth between width 50 and 100 before you continue and check its scrollheight, it will change all the time. Now what happens when we continue is what's going wrong for me.
4: Make sure width is 50% by clicking button2 then Click button4 and notice that the textarea height has increased.
5: Click button1 and check its current scrollheight.
6: Now click button3 to change it's width to 100%
7: Click button1 and notice that the scrollheight is still the same even tho we just changed its width from 50% to 100% ??
As you can see here the scrollheight is no longer changing, and not the textarea height either, even though i changed the textarea width, Anyone know why this is happening? Any help or input is highly appreciated, thanks!
$("#b1").click(function(){
var textaraElement =document.getElementById("TextArea");
alert(textaraElement.scrollHeight);
});
