jQuery UI #4440

http://bugs.jqueryui.com/ticket/4440

by TJ VanToll

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<!--
<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
-->

<p><a href="http://bugs.jqueryui.com/ticket/4440">jQuery UI Bug #4440</a> - The resizable handle should appear within the textarea like native textareas.  The <code>outline</code> applied to the jQuery UI textarea on focus also is off a little in Safari only.</p>
    
<label for="uiResizable">jQuery UI Resizable:</label>
<textarea id="uiResizable"></textarea>
    
<label for="nativeResizable">Native Resizable:</label>
<textarea id="nativeResizable"></textarea>

CSS

/* jQuery UI demo (http://jqueryui.com/resizable/#textarea) uses this to get fix the positioning. */
.ui-resizable-se {
    /* bottom: 17px !important; */
}

p { line-height: 1.5; }
label {
    display: block;
    margin-top: 20px;
}

JavaScript

$('#uiResizable').resizable({
    handles: 'se'
});