#4345 open bug ()

Opened March 16, 2009 09:51AM UTC

Last modified June 29, 2013 12:10PM UTC

Sortable: CSS defined widths / heights are ignored on helper

Reported by: iamcalledrob Owned by:
Priority: major Milestone: none
Component: ui.sortable Version: 1.7
Keywords: sortable, helper Cc:
Blocked by: Blocking:
Description

jQuery UI (1.7) seems to have a few bugs with its use of inline styles with ui.sortable.

If I define a helper, with a width and height set in CSS, the helper's properties are ignored and an inline style is set that overwrites that data for my helper. So, if my helper is 200x200px, as soon as that helper is cloned and used, an inline style is applied to make it completely different dimensions.

The only way to fix this is to define an inline style on the element.

This appears to be because it is checking helper[0].style.width instead of $(helper[0]).width(), which reads the width correctly.

A similar thing happens when I explicitly define a helper, or use clone. The original item in the list gets an inline style of display: none; applied to it, even if I have defined it otherwise.

Here is a testcase:

http://jsbin.com/obale

Here is an example of it working, if I explicitly define an inline style:

http://jsbin.com/okoti

Rob

Attachments (0)
Change History (10)

Changed March 18, 2009 10:42AM UTC by rdworth comment:1

component: ui.core → ui.sortable

Changed May 07, 2009 10:58AM UTC by jzaefferer comment:2

milestone: TBD → 1.7.2

Changed May 07, 2009 01:22PM UTC by jzaefferer comment:3

milestone: 1.7.2 → 1.8

Changed October 11, 2012 02:54PM UTC by scottgonzalez comment:4

milestone: 1.9.0 → 2.0.0

Changed October 25, 2012 02:33PM UTC by petersendidit comment:5

status: new → open

Changed November 09, 2012 12:49AM UTC by mikesherov comment:6

_comment0: confirmed on latest: http://jsfiddle.net/9zHfy/ → 1352424296018938

confirmed on latest: http://jsfiddle.net/Kwq7Y/

Changed February 28, 2013 02:47AM UTC by tj.vantoll comment:7

milestone: 2.0.0 → none
summary: ui.sortable overriding css-defined width/height → Sortable: CSS define widths / heights are overriden

Changed March 17, 2013 01:43AM UTC by tj.vantoll comment:8

summary: Sortable: CSS define widths / heights are overriden → Sortable: CSS defined widths / heights are ignored on helper

This is does seem to be caused by the use of style.height and style.width instead of .height() and .width() here - https://github.com/jquery/jquery-ui/blob/44d07173db32b498e5f83f60db290ff1463daee3/ui/jquery.ui.sortable.js#L909.

Changed March 17, 2013 02:12AM UTC by tj.vantoll comment:9

I take that back, the problem is right underneath it: https://github.com/jquery/jquery-ui/blob/44d07173db32b498e5f83f60db290ff1463daee3/ui/jquery.ui.sortable.js#L912.

		if(!helper[0].style.width || o.forceHelperSize) {
			helper.width(this.currentItem.width());
		}
		if(!helper[0].style.height || o.forceHelperSize) {
			helper.height(this.currentItem.height());
		}

This will set the height and width of the helper if it doesn't have a height/width style attribute. These checks need to be smart enough to also check for CSS declared heights and widths.

Here's a better test case: http://jsfiddle.net/tj_vantoll/5aryQ/.

If I comment out the 

helper.width(this.currentItem.width());
and 
helper.height(this.currentItem.height());
lines this works as expected.

Changed June 29, 2013 12:10PM UTC by crimmcjsui comment:10

Fixed the issue for future releases by making sure that the item doesn't already have a size (width/height) set with a CSS rule.

I've sent also a pull request base on the commit from my cloned repository: https://github.com/crimmc/jquery-ui/tree/bug_4345.