CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
James
James

Reputation: 2999

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

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.

Upvotes: 9

Views: 8964

Answers (3)

Zuul
Zuul

Reputation: 16269

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!

Upvotes: 20

Michael Seibt
Michael Seibt

Reputation: 1346

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.

Upvotes: 13

Lee
Lee

Reputation: 10603

http://jsfiddle.net/89v9U/1/

You will need a new image for the resize handler, but heres something you can work with, its just CSS!

Upvotes: 1

Related Questions