0

I'm trying to set height of the textarea with JS, by default so to speak, but let user resize it later. So I use this HTML/CSS/JS:

<textarea id="i3" cols="45" rows="5" style="line-height: 1.0;">
</textarea>

var obj = document.getElementById("i3");
if(obj.scrollHeight > obj.offsetHeight)
{
    obj.style.height = obj.scrollHeight + 'px';
}

The issue is that when the textarea is resized the user cannot resize it smaller than the height set by my JS. Is there any way to let user do it?

PS. I need this for Google Chrome only (I'm writing a Chrome Extension.)

c00000fd
  • 20,994
  • 29
  • 177
  • 400
  • I'm fairly certain if you set the resizable property of the text area, most current browsers will be able to resize the box. I can't check right now as I am on my phone. – Jhecht Sep 06 '14 at 09:58
  • The `resize` property would work, but if you explicitly set rows, I don't think it would allow you to reduce the height below what is required for 5 rows. – Harry Sep 06 '14 at 09:59
  • Related thread - http://stackoverflow.com/questions/15146449/custom-css-to-allow-chrome-textarea-resize-smaller-than-initial-state – Harry Sep 06 '14 at 10:01
  • @Harry: Well, that is my dilemma. The textarea can be resized, no problem there. It's locking up at the height that I specify in my JS and I don't know how else to resize it automatically. – c00000fd Sep 06 '14 at 10:01
  • @Harry: So, what's the solution from that thread? No, it can't be done. – c00000fd Sep 06 '14 at 10:04
  • @c00000fd: Unfortunately it seems to be the case mate (with only CSS). I have not tried the JS solutions posted in that thread (it was too much for too little in my case when I had the same trouble) but you can maybe have a look at them. – Harry Sep 06 '14 at 10:07

1 Answers1

-1

the problem is that you used if condition if(obj.scrollHeight > obj.offsetHeight) according to this browser is not commanded to look when it is smaller so set a condition 

  var obj = document.getElementById("i3");
if(obj.scrollHeight > obj.offsetHeight)
{
    obj.style.height = obj.scrollHeight + 'px';
}  
else if(obj.scrollHeight < obj.offsetHeight)
    {
        obj.style.height = obj.scrollHeight - 'px';
    }

i think it will help but i didn't tried it yet so sorry if I am worng

himanshu
  • 1,732
  • 1
  • 11
  • 12
  • I'm sorry but your JS doesn't make sense. – c00000fd Sep 06 '14 at 10:09
  • i didn't tried it. i just gave a concept that you have to define a condition when scrollheight is smaller than offsetheight . because you only defined it when it is greater so code works only when its greater and stops you when its not greater – himanshu Sep 06 '14 at 10:15
  • What is the meaning of doing this `obj.scrollHeight - 'px'`? – c00000fd Sep 06 '14 at 18:42