Opened 4 years ago

Closed 3 years ago

Last modified 3 years ago

#9658 closed bug (fixed)

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

Reported by: patrixd Owned by: patrixd
Priority: minor Milestone: 1.11.4
Component: ui.resizable Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:

Description

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.

Change History (10)

comment:1 Changed 4 years ago by Scott González

Owner: set to patrixd
Status: newpending

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?

comment:2 Changed 4 years ago by Scott González

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

comment:3 Changed 4 years ago by patrixd

Status: pendingnew

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 with the original code 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

Last edited 4 years ago by patrixd (previous) (diff)

comment:4 Changed 4 years ago by 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

comment:5 Changed 4 years ago by Scott González

Status: newopen
Summary: Custom handlers did not work as jquery objects (outside the resizable element)Resizable: Custom handles outside the resizable element don't work

comment:7 Changed 3 years ago by Patricia Juarez

Resolution: fixed
Status: openclosed

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

comment:8 Changed 3 years ago by tj.vantoll

Milestone: none1.12.0

comment:9 Changed 3 years ago by 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

comment:10 Changed 3 years ago by Scott González

Milestone: 1.12.01.11.4
Note: See TracTickets for help on using tickets.