0

How would I get a <textarea> to resize upon the content inside? Like how facebook does it also so there is no scrollbar? If anyone could give me an insight or a link of how to do this It would be greatly appreciated. Not really looking for a JS answer really but if u know any solutions I don't mind.

Thanks

Daryl
  • 382
  • 3
  • 7
  • 19

3 Answers3

1

jQuery plugin: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

The Scrum Meister
  • 29,681
  • 8
  • 66
  • 64
  • This is great, but I am a little curious to know if there is a method without JS. We'll soon see haha. – Daryl Dec 21 '10 at 04:16
1

Firstly, the size of a <textarea> is somewhat dependent upon the browser you are running and how it is rendering the webpage on the screen, so while you can provide guidance to the browser with CSS style, you are really just giving the browser some advice about what should be done. The browser lays things out the way it darn well pleases.

Secondly, if the user can resize the window, you aren't going to be able to make the <textarea> larger than the parent in which it is contained -- unless you programatically force a window resize which means Javascript.

And since we are talking about resizing a <textarea> upon content, then we are talking about dynamic content of some fashion, which means Javascript (or Ajax) must be going on in the background to make this happen - so I'm curious about your aversion to using JS.

A solution to your problem is predicated upon a more complete description of what you are trying to do...

Can you provide some detail?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Zeke Hansell
  • 665
  • 2
  • 6
  • 11
1

I think this is what you're after...

HTML AND JAVASCRIPT

<div class="statusupdate">
<textarea></textarea><button>Submit</button>
</div>
<div class="hiddentextarea"></div>
<script>
$('.statusupdate textarea').keyup(function()
{
    var statustext = $(this).val();
    $('.hiddentextarea').text(statustext);
    var height = $('.hiddentextarea').height();
    $(this).height(height);
});
</script>

CSS

.statusupdate {border-bottom:1px solid #dadada;}
.statusupdate textarea {margin: 11px 0 10px 10px;width:400px;float:left;overflow:visible;font-size:12px;height:17px;letter-spacing:0px;word-spacing:0px;font-family:arial;padding: 2px 0 2px 5px;line-height:16px;overflow:hidden;}
.hiddentextarea {width:395px;float:left;display:none;margin: 10px;border-bottom:1px solid #dadada;min-height:17px;font-size:12px;letter-spacing:0px;word-spacing:0px;font-family:arial;padding: 5px 0 5px 5px;line-height:16px;}
.statusupdate button {margin: 10px;}
James Hilton
  • 475
  • 5
  • 9