Opened 10 years ago

Last modified 5 years ago

#4345 open bug

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

Change History (10)

comment:1 Changed 10 years ago by rdworth

Component: ui.coreui.sortable

comment:2 Changed 10 years ago by Jörn Zaefferer

Milestone: TBD1.7.2

comment:3 Changed 10 years ago by Jörn Zaefferer

Milestone: 1.7.21.8

comment:4 Changed 6 years ago by Scott González

Milestone: 1.9.02.0.0

comment:5 Changed 6 years ago by petersendidit

Status: newopen

comment:6 Changed 6 years ago by mikesherov

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

Last edited 6 years ago by mikesherov (previous) (diff)

comment:7 Changed 6 years ago by tj.vantoll

Milestone: 2.0.0none
Summary: ui.sortable overriding css-defined width/heightSortable: CSS define widths / heights are overriden

comment:8 Changed 6 years ago by tj.vantoll

Summary: Sortable: CSS define widths / heights are overridenSortable: 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.

comment:9 Changed 6 years ago by 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.

comment:10 Changed 5 years ago by 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.

Note: See TracTickets for help on using tickets.