jQuery UI :: Risizable better size of draggable edge

Created For: http://stackoverflow.com/q/10621558/352449

by Salustiano Silva

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css">
<div class="demo">
    <div id="resizable" class="ui-widget-content">
        <h3 class="ui-widget-header">Resizable</h3>
    </div>
</div><!-- End demo -->

<div style="display: none;" class="demo-description">
<p>Enable any DOM element to be resizable.  With the cursor grab the right or bottom border and drag to the desired width or height.</p>
</div><!-- End demo-description -->

CSS

#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }


.ui-resizable-s {
    height: 15px;
}
.ui-resizable-e {
    width: 15px;
}
.ui-resizable-se {
    width: 15px;
    height: 15px;
}

JavaScript

$(function() {
    $( "#resizable" ).resizable();
});