JQuery-UI: resizable - how to increase the size of the dragged edge?

Question

I use jQuery-UI resizable to increase the height of the table. I am wondering how to create a thicker lower border that can be dragged? Increasing the border around the table does not matter.

Answer 1

When calling $(...).resize() you can set any child as a handle. Take a look at this example :

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

It allows you to resize the #resizeDiv at the bottom edge, #handle element as the active drag area.

Answer 2

You can achieve this by changing a bit of CSS:

CSS ^{classes present in jQuery UI stylesheet}

 /* 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; } 

In this example script you can see it in action!

Note:

You don't need to change anything in the jQuery UI stylesheet, just declare the css values ​​for the news after you include the jQuery UI stylesheet!

Answer 3

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

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