jQuery-UI: resizable - how to increase size of draggable edge?

Question

I am using jQuery-UI's resizable edges to increase the height of a table. I am wondering how to create a thicker bottom border which can be dragged? Increasing the border around the table doesn't make a difference.

Answer 1

You can achieve that by changing a bit of CSS:

CSS ^{classes present on the Jquery UI style sheet}

/* handle on the bottom */
.ui-resizable-s {
    height: 15px;
}

/* handle on the right */
.ui-resizable-e {
    width: 15px;
}
/* handle icon (corner) */
.ui-resizable-se {
    width: 15px;
    height: 15px;
}

On this Fiddle Example you can see it in action!

Note:

You don't really need to change anything on the jQuery UI Style Sheet, just declare the news css values after the inclusion of the jQuery UI Style Sheet!

Answer 2

With calling $(...).resize(), you're able to set any child-element as handle. Take a look at this example:

$( "#resizeDiv" ).resizable({handles: {'s': '#handle'}});

It enables resizing for the #resizeDiv at the bottom edge, assigning the #handle element as the active dragging area.