6

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?

Jason Evans
  • 28,906
  • 14
  • 90
  • 154
Kirk Ross
  • 6,413
  • 13
  • 61
  • 104

2 Answers2

5

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/

K K
  • 17,794
  • 4
  • 30
  • 39
  • I've got the size working now, but I need to prevent the handle from moving when using the scroll bar. See this fiddle http://jsfiddle.net/kirkbross/Vcz4h/3/ – Kirk Ross May 09 '14 at 20:04
  • Add bottom:0 to handler to keep it fixed to bottom – K K May 09 '14 at 21:01
2

You can pass in jquery references to the handles like so:

$('#elementResizable').resizable({
    handles: {
        'n': '#ngrip',
        'e': '#egrip',
        's': '#sgrip',
        'w': '#wgrip'
    }
});

Demo that I found

terpinmd
  • 1,014
  • 8
  • 15
  • 1
    How do I stop the handle from moving when you use the scroll bar? Fiddle: http://jsfiddle.net/kirkbross/Vcz4h/3/ – Kirk Ross May 10 '14 at 19:18