Skip to main content

Search and Top Navigation

#3237 closed bug (fixed)

Opened August 20, 2008 11:03PM UTC

Closed January 16, 2009 05:35AM UTC

Last modified February 06, 2011 07:42PM UTC

Resizable handles fail to disappear

Reported by: rjwalsh@stanford.edu Owned by: eduardo
Priority: critical Milestone: 1.7
Component: ui.resizable Version: 1.6b
Keywords: resiable handle disable Cc:
Blocked by: Blocking:
Description

I did some searching and didn't find this anywhere, so here goes. After making an element resizable, then calling

.resizable('disable');

the object is no longer resizable but the resize handles still appear on mouseover. This is really a minor cosmetic change, but seems like they should disappear if resizing is disabled.

Attachments (0)
Change History (6)

Changed January 02, 2009 02:44PM UTC by scottgonzalez comment:1

milestone: TBD1.6
priority: minorcritical

Changed January 16, 2009 05:35AM UTC by eduardo comment:2

If you want hide makes more sense destroy the resizable or do it using theme:

.ui-resizable-disabled .ui-resizable-handle { display: none; }

Changed January 16, 2009 05:35AM UTC by eduardo comment:3

resolution: → fixed
status: newclosed

Changed February 06, 2011 07:25PM UTC by machineghost comment:4

Wait, so to disable and then re-enable the resizing of an element, I have to completely destroy and then recreate? That makes no sense; why pay the expense of destroying/recreating when we could keep everything and just not trigger the autoHide if disabled? I mean really, why even have "disabled" if you're going to tell people they have to destroy stuff?

Furthermore, the proposed fix/workaround of:

.ui-resizable-disabled .ui-resizable-handle { display: none; }

doesn't work at all, because the autoHide handler explicitly does "self._handles.show();" which overrides any style you could possibly add.

Could the devs please re-open this ticket? The *real* fix (IMESHO) is to simply have the autoHide hover function check whether the resizable is disabled, and if not return. This is super-easy to do, takes 2 lines, and solves the bug in a way that makes sense, not in a "suck it user, you're not doing what we're doing so you don't matter" kind of way ;-)

In other words this chunk of code:

.hover(function() {
	$(this).removeClass("ui-resizable-autohide");
	self._handles.show();
},
function(){
	if (!self.resizing) {
		$(this).addClass("ui-resizable-autohide");
		self._handles.hide();
	}
});

which comes a few lines after "if (o.autoHide)", should really be:

.hover(function() {
	if ($(this).parent.hasClass("ui-resizable-disabled")) return;
	$(this).removeClass("ui-resizable-autohide");
	self._handles.show();
},
function(){
	if ($(this).parent.hasClass("ui-resizable-disabled")) return;
	if (!self.resizing) {
		$(this).addClass("ui-resizable-autohide");
		self._handles.hide();
	}
});

I have tested this fix and it does solve the problem; please consider implementing it so that I (and everyone else who comes across this bug) don't have to run a "hacked" copy of the jQuery UI code, which is a pain to upgrade (also an uncountable number of users who will never see this bug report but will see this bug will be appreciate it).

Changed February 06, 2011 07:31PM UTC by scottgonzalez comment:5

machineghost, please file a new ticket since your (valid) complaint is specifically about the autoHide option.

Changed February 06, 2011 07:42PM UTC by machineghost comment:6

oh, sure thing; also, for posterity, my fix was dumb and had ".parent" when it shouldn't.