jQuery UI Resizable - How to thicken handle

Question

Is it possible to make the handle thicker, for easier grabbing?

For example, in the link below, you will notice that I have a handle on a div at the bottom only, which is difficult to get hold of using the mouse as it seems to be 1px high. Is it possible to make the handle 10px heigh, so it looks and feels like the image is being grabbed?

http://jsfiddle.net/rYFEY/25/

Murr

Answer 1

.ui-resizable-s {
    bottom: 0;
    height: 10px;
}

See: http://jsfiddle.net/thirtydot/rYFEY/376/

+rgba for clarity: http://jsfiddle.net/thirtydot/rYFEY/377/

+rgba -overflow: hidden with the default bottom: -5px: http://jsfiddle.net/thirtydot/rYFEY/378/

Middleweight

And all 4 handles have the .ui-resizable-handle class. – Demonolatry

Thanks! I'll just add that in case of overflow hidden the 'exposed' height will be the half (5px in this case) – Startling

The jsfiddle's don't work because of wrong url for jquery-ui.css. Fixed it here jsfiddle.net/rYFEY/375/ – Boohoo

@stomtech: Thanks for letting me know. I have also updated them in my answer. – Middleweight

Answer 2

Expanding on thirtydot: if you have multiple resizables on the same page, you may want to specify which element to act on with a child selector #resizable > .ui-resizable-s:

<style>
  #resizable > .ui-resizable-s {
    background: black;
    bottom: 0;
    height: 10px;
  }
</style>
<div id="resizable"></div>
<script>$('#resizable').resizable()</script>

This works because resizable() adds the handles inside the parent div like:

<div id="resizable">
  <div class="ui-resizable-handle ui-resizable-s"></div>    
</div>

If you want to do this for a textarea however, you have to use the sibling selector instead:

#resizable + .ui-resizable-s

because in that case jQuery UI intelligently sees that it is a textarea and puts it inside a wrapper div:

<div>
  <textarea id="resizable"></textarea> 
  <div class="ui-resizable-handle ui-resizable-s"></div>    
</div>

The best way to reach those conclusions is to run your browser's DOM inspector (Ctrl+Shirt+I on Firefox and Chrome) to see what jQuery UI is doing to your HTML.

Demonolatry