Sortable: CSS defined widths / heights are ignored on helper

[iamcalledrob]

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

[mikesherov]

confirmed on latest: ​http://jsfiddle.net/9zHfy/

[tj.vantoll]

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.

[tj.vantoll]

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.

[crimmcjsui]

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.