Search and Top Navigation
#8756 closed feature (fixed)
Opened October 31, 2012 12:26PM UTC
Closed November 05, 2012 06:16PM UTC
Last modified November 05, 2012 09:56PM UTC
Resizable: Complex markup for handles
| Reported by: | MatteS75 | Owned by: | MatteS75 |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.10.0 |
| Component: | ui.resizable | Version: | 1.9.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
Creating a handle with an inner element renders the resize handle useless.
1. Create a resizable div with an inner div with the handle classes setup
2. Add another div inside the handle div
3. Initialize the resizable
Now the resizable handle does not work.
Removing the inner div, and it does work.
jsFiddle: http://jsfiddle.net/MatteS75/3dwVp/15/
Attachments (0)
Change History (13)
Changed October 31, 2012 12:31PM UTC by comment:1
| _comment0: | Possible workaround: \ \ $.widget("ui.myresizable", $.ui.resizable, { \ \ _mouseCapture: function (event) { \ var handle = false; \ for (var i in this.handles) { \ if ($(this.handles[i])[0] == event.target || $(this.handles[i]).has(event.target)) { \ handle = true; \ } \ } \ \ return !this.options.disabled && handle; \ } \ \ }); \ → 1352056255743895 |
|---|
Changed October 31, 2012 01:43PM UTC by comment:2
| milestone: | 1.10.0 → 2.0.0 |
|---|---|
| owner: | → MatteS75 |
| status: | new → pending |
| summary: | Resizable handle with inner element does not work → Resizable: Complex markup for handles |
| type: | bug → feature |
What is your use case that makes this necessary?
Changed October 31, 2012 02:08PM UTC by comment:3
| _comment0: | Replying to [comment:2 scott.gonzalez]: \ > What is your use case that makes this necessary? \ \ For me, I need it to style the handle. I know its not always the best solution to add divs just for styling, but in this case I need to make a css based triangle using the common css trick: \ http://css-tricks.com/snippets/css/css-triangle/ \ \ I have fixed the problem in our jquery ui code directly, but would rather this worked out of the box ofcourse. \ \ I could help fix it, but im a bit new to contributing to js oss projects. I guess ill have to dive into the jquery ui code with tests and all if so. \ \ Anyway, my fix looks like this: \ \ _mouseCapture: function(event) { \ var handle = false; \ for (var i in this.handles) { \ - if ($(this.handles[i])[0] == event.target) { \ + if ($(this.handles[i])[0] == event.target || $(this.handles[i]).has(event.target)) { \ handle = true; \ } \ } \ → 1351692630043804 |
|---|---|
| _comment1: | Replying to [comment:2 scott.gonzalez]: \ > What is your use case that makes this necessary? \ \ For me, I need it to style the handle. I know its not always the best solution to add divs just for styling, but in this case I need to make a css based triangle using the common css trick: \ http://css-tricks.com/snippets/css/css-triangle/ \ \ I have fixed the problem in our jquery ui code directly, but would rather this worked out of the box ofcourse. \ \ I could help fix it, but im a bit new to contributing to js oss projects. I guess ill have to dive into the jquery ui code with tests and all if so. \ \ Anyway, my fix looks like this: \ \ _mouseCapture: function(event) { \ var handle = false; \ for (var i in this.handles) { \ - if ($(this.handles[i])[0] == event.target) { \ + if ($(this.handles[i])[0] == event.target || $(this.handles[i]).has(event.target)) { \ handle = true; \ } \ } \ \ (Im sorry, my copy and paste from hg doesnt work so well, but I hope you can read it) \ → 1351692900467693 |
| status: | pending → new |
Replying to [comment:2 scott.gonzalez]:
What is your use case that makes this necessary?
For me, I need it to style the handle. I know its not always the best solution to add divs just for styling, but in this case I need to make a css based triangle using the common css trick:
http://css-tricks.com/snippets/css/css-triangle/
I have fixed the problem in our jquery ui code directly, but would rather this worked out of the box ofcourse.
I could help fix it, but im a bit new to contributing to js oss projects. I guess ill have to dive into the jquery ui code with tests and all if so.
Anyway, my fix looks like this:
_mouseCapture: function(event) {
var handle = false;
for (var i in this.handles) {
- if ($(this.handles[i])[0] == event.target) {
+ if ($(this.handles[i])[0] == event.target || $(this.handles[i]).has(event.target)) {
handle = true;
}
}
Changed October 31, 2012 11:37PM UTC by comment:4
| status: | new → pending |
|---|
You can build any CSS design using a single element, so I don't see why you need nested elements for this: http://jsfiddle.net/3dwVp/17/
Changed November 01, 2012 11:42AM UTC by comment:5
| status: | pending → new |
|---|
Replying to [comment:4 scott.gonzalez]:
You can build any CSS design using a single element, so I don't see why you need nested elements for this: http://jsfiddle.net/3dwVp/17/
Yes, for a single element that is nice.
However, our design requires something like this: http://jsfiddle.net/3dwVp/18/
If I can make it like that without an inner div itd make my day.
Changed November 01, 2012 11:45AM UTC by comment:6
By the way, I have forked the repo and am investigating how to best write tests for this at this point.
Changed November 02, 2012 09:08AM UTC by comment:7
Ok, I think I got it working, and the fix was a little different and better than my first suggestion I think. Here is the pull request:
Changed November 02, 2012 09:51AM UTC by comment:8
If this pull request is accepted, id gladly fix http://bugs.jqueryui.com/ticket/8757 aswell. Or repost a new ticket, if that thing still fails that is.
Changed November 02, 2012 08:53PM UTC by comment:9
A new pull request. I made a branching mistake with the first one. As said, im new to this =)
Changed November 04, 2012 07:15PM UTC by comment:10
| status: | new → open |
|---|
Changed November 05, 2012 06:16PM UTC by comment:11
| resolution: | → fixed |
|---|---|
| status: | open → closed |
Resizable: Made handles work with complex markup. Fixes #8756 - Resizable: Complex markup for handles.
Changeset: 0bff32a2b1c2273e46dc0f70bc1058ad304ebcc5
Changed November 05, 2012 06:17PM UTC by comment:12
| milestone: | 2.0.0 → 1.10.0 |
|---|
Changed November 05, 2012 09:56PM UTC by comment:13
New pull request!
Possible workaround:
$.widget("ui.myresizable", $.ui.resizable, { _mouseCapture: function (event) { var handle = false; for (var i in this.handles) { if ($(this.handles[i])[0] == event.target || $(this.handles[i]).has(event.target)) { handle = true; } } return !this.options.disabled && handle; } });