Resizable: Custom handles outside the resizable element don't work

[patrixd]

I needed to use as handle a div outside the resizable element. So I tried to specify the jquery element as the documentation said but it did not work.

$("#resizable1").resizable({ handles: { "s": $("#customResizableHandle") }, ..})
<div id="resizable1">I'm a resizable.</div>
<div id="customResizableHandle" class="ui-resizable-handle ui-resizable-s"></div>

The browser that I used was Chrome

The documentation said in handles option: Object: If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.

[Scott González]

The documented and requested behavior seems odd to me. Can you please explain the use case for having the handle be outside of the element?

[Scott González]

Also, I created a reduced test case for you: ​http://jsfiddle.net/844mx/

[patrixd]

I fixed the problem and requested a pull in github ​https://github.com/jquery/jquery-ui/pull/1134

I have to clean up the history. But I don't usually use git so I'm not sure how to make that. I created the test yesterday and it does not work.

The documentation of resizable sais:

Object: The following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.

Note: When generating your own handles, each handle must have the ui-resizable-handle class, as well as the appropriate ui-resizable-{direction} class, .e.g., ui-resizable-s.

So I tried to use it.

There are some times where its need a handler outside the resizable element. Like the next problem in stackoverflow: ​http://stackoverflow.com/questions/958419/custom-resizable-handles-in-jquery-ui A textarea with a div handler after of it.

In my case I had a grid and a detail div down of it. (resizable and alsoResizeReverse) The grid had a scroll and when I resized the grid and detail it works. But when I scrolled the grid the handler scrolled too and it dissappeared.

My solution was to have an structure like the next one:

<div id="#grid"></div> <--- resizable
<div id="#detail">     <--- alsoResizeReverse
   <div id="#handler"></div>
</div>

And it works with my fix. My case is really complicated but the test that you wrote is easy and it does not work. I tried lot of alternatives and I really need the handler outside the grid div. Your test is similar of mine and works with the fix. You can download my branch and try it. ​https://github.com/patrixd/jquery-ui/tree/patch-1/tests/unit/resizable

Do you need any changes in the test that you created, I have to modify it to show you anything?

Thanks a lot in advance

[patrixd]

I finally reset the history. Sorry at the beginning I used the website not git locally.

​https://github.com/jquery/jquery-ui/pull/1135

[tj.vantoll]

Updated PR: ​https://github.com/jquery/jquery-ui/pull/1377

[Patricia Juarez]

Resizable: Modified to allow jquery objects as handles

Custom handlers did not work as jquery objects (outside the resizable element)

Fixes #9658 Closes gh-1445

Changeset: 18e301f4e29c2080e9aa9dac87c00dee137cb6c9

[Patricia Juarez]

Resizable: Modified to allow jquery objects as handles

Custom handlers did not work as jquery objects (outside the resizable element)

Fixes #9658 Closes gh-1445 (cherry picked from commit 18e301f4e29c2080e9aa9dac87c00dee137cb6c9)

Changeset: 65f31c2ead48755ac4cdffb95478a2f6d02801ff