Resizing font in textarea without increasing textarea size

Question

I was messing around with some Jquery to have a slider control the size of font in a text area and used something like:

...  
slide: function( event, ui ) {
    $('#t_area').css("font-size", ui.value + "px");
}
....

within the function to control the slider. I noticed that even when I didn't have text in the textarea, it still increased in size when I moved the slider (and also grew too large when there was text in it.) So I was wondering if there was a way to increase the size of the text without having that side effect?

Thanks

Answer 1

CSS：

textarea { max-width:300px;max-height:300px; }

Answer 2

You could just use css for this.

textarea{
    width: 100px;
    height: 100px; 
}

Answer 3

Set dimensions on the textarea . Demo: http://jsfiddle.net/6qZAh/

textarea {
    width: 100px;
    height: 50px;    
}

Without explicit dimensions, the size is based on the rows/cols of the textarea . Even when not those values are not explicitly set, the user agent uses a default.

Demo: http://jsfiddle.net/6qZAh/1/

$("textarea").on("click",function(){
   var t = $(this);
   alert(t.prop("rows"));
   alert(t.prop("cols"));
});

In Chrome and IE9, this shows me "2" and "20".

This appears to be spec-driven (emphasis mine):

Rows

If applying the rules for parsing non-negative integers to the attribute's value results in a number greater than zero, then the element's character height is that value; otherwise, it is 2.

Cols

If applying the rules for parsing non-negative integers to the attribute's value results in a number greater than zero, then the element's character width is that value; otherwise, it is 20.

Answer 4

if($('#t_area').text() != ""){    
  $('#t_area').css("font-size", ui.value + "px");
}