Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#8756 closed feature (fixed)

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/

Change History (13)

comment:1 Changed 4 years ago by MatteS75

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;
	}

});
Last edited 4 years ago by jzaefferer (previous) (diff)

comment:2 follow-up: Changed 4 years ago by scottgonzalez

  • Milestone changed from 1.10.0 to 2.0.0
  • Owner set to MatteS75
  • Status changed from new to pending
  • Summary changed from Resizable handle with inner element does not work to Resizable: Complex markup for handles
  • Type changed from bug to feature

What is your use case that makes this necessary?

comment:3 in reply to: ↑ 2 Changed 4 years ago by MatteS75

  • Status changed from pending to new

Replying to 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;
 			}
 		}
Last edited 4 years ago by MatteS75 (previous) (diff)

comment:4 follow-up: Changed 4 years ago by scottgonzalez

  • Status changed from new to 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/

comment:5 in reply to: ↑ 4 Changed 4 years ago by MatteS75

  • Status changed from pending to new

Replying to 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.

comment:6 Changed 4 years ago by MatteS75

By the way, I have forked the repo and am investigating how to best write tests for this at this point.

comment:7 Changed 4 years ago by MatteS75

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:

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

comment:8 Changed 4 years ago by MatteS75

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.

comment:9 Changed 4 years ago by MatteS75

A new pull request. I made a branching mistake with the first one. As said, im new to this =)

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

comment:10 Changed 4 years ago by jzaefferer

  • Status changed from new to open

comment:11 Changed 4 years ago by Mathias Stenbom

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

Resizable: Made handles work with complex markup. Fixes #8756 - Resizable: Complex markup for handles.

Changeset: 0bff32a2b1c2273e46dc0f70bc1058ad304ebcc5

comment:12 Changed 4 years ago by scottgonzalez

  • Milestone changed from 2.0.0 to 1.10.0
Note: See TracTickets for help on using tickets.