#9658 closed bug (fixed)

Opened November 14, 2013 07:40AM UTC

Closed March 03, 2015 01:52PM UTC

Last modified March 10, 2015 04:34PM UTC

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.

Attachments (0)

Change History (10)

Changed November 14, 2013 11:47AM UTC by scottgonzalez comment:1

owner:	→ patrixd
status:	new → 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?

Changed November 14, 2013 11:47AM UTC by scottgonzalez comment:2

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

Changed November 14, 2013 12:05PM UTC by patrixd comment:3

_comment0:	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 → 1384430795009733
status:	pending → new

_comment0:

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 → 1384430795009733

status:

pending → 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

Changed November 14, 2013 12:59PM UTC by patrixd comment:4

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

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

Changed November 14, 2013 02:01PM UTC by scottgonzalez comment:5

status:	new → open
summary:	Custom handlers did not work as jquery objects (outside the resizable element) → Resizable: Custom handles outside the resizable element don't work

Changed November 02, 2014 10:37PM UTC by tj.vantoll comment:6

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

Changed March 03, 2015 01:52PM UTC by Patricia Juarez comment:7

resolution:	→ fixed
status:	open → 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

Changed March 03, 2015 01:53PM UTC by tj.vantoll comment:8

milestone:	none → 1.12.0

Changed March 10, 2015 04:31PM UTC by Patricia Juarez comment:9