jQuery UI resizable handle hit area / sensitivity / tolerance

Question

I'm using jQuery ui resizable and I (personally) find that it's like a video game to nail the hit area of when you're trying to resize an element.

It seems like the hit area is a single pixel on the edge of the div! WT...

Does anyone know how to increase the hit area / tolerance of the handle so you don't have to move your mouse like a surgeon to grab the edge of your div?

Answer 1

Resizable handles have class ui-resizable-handle . You can style these classes as per your conveniences and choices. You can increase their size, dimensions, shapes etc. For example:

.ui-resizable-handle{width:0;height:0;border:4px solid blue;border-radius:10px;}

In this case, you'll have resizable handles of circular shape, blue in color and quite bigger.

.ui-resizable-handle{width:0;height:0;border:4px solid blue;}

In this case, handles will be rectangular in shape. So, you can do whatever you want with CSS with these handles.

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/92/