Opened 3 years ago

Closed 2 years ago

Last modified 2 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 3 years ago by scottgonzalez

  • Owner set to patrixd
  • Status changed from new to pending

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 3 years ago by scottgonzalez

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

comment:3 Changed 3 years ago by patrixd

  • Status changed from pending to new

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 3 years ago by patrixd (previous) (diff)

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

  • Status changed from new to open
  • Summary changed from Custom handlers did not work as jquery objects (outside the resizable element) to Resizable: Custom handles outside the resizable element don't work

comment:7 Changed 2 years ago by Patricia Juarez

  • Resolution set to fixed
  • Status changed from open to closed

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 2 years ago by tj.vantoll

  • Milestone changed from none to 1.12.0

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

  • Milestone changed from 1.12.0 to 1.11.4
Note: See TracTickets for help on using tickets.