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/

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/

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.