9

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.

Jon Grant
  • 11,369
  • 2
  • 37
  • 58
James
  • 2,951
  • 8
  • 41
  • 55

3 Answers3

20

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!

Zuul
  • 16,217
  • 6
  • 61
  • 88
13

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.

Michael Seibt
  • 1,346
  • 9
  • 13
1

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!

Lee
  • 10,496
  • 4
  • 37
  • 45