I'd like to make a textarea resizable. I tried out jQuery UI's "resizable" functionality, but, much as I love jQuery, the resizable thing isn't quite there yet. I want the textarea to resize heightwise only, via a handle at the bottom-center. jQuery lets you resize heightwise only, but evidently doesn't let you place a handle anywhere other than lower right corner, despite what the docs say.
Does anyone know of an alternate library for this functionality?
Are you sure about this? The handles option worked fine for me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/ui-lightness/jquery-ui-1.7.2.custom.css"
rel="stylesheet" type="text/css">
</head>
<body>
<div id="welcome" class="ui-widget-content">Hello, world!</div>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#welcome").resizable({ handles: "n, s" });
});
</script>
</body>
</html>
You can style the ui-resizable-handle, ui-resizable-s, and ui-resizable-n classes.
Remember that the webkit renderer in Safari and Chrome make all textareas resizable (with a handle) by default.