Sortable: Placeholder breaks table-layout: fixed

Do you have a proposal for how to make this work with table-layout: fixed? Should we walk the row and add up all the column counts?

I should clarify, you suggested we should "calculate number od TD elements within row". I assume we need to account for colspan within the columns. What happens if the rows have different column counts? I guess we can copy the current row down to the td level by generating a td with a colspan that matches each td in the existing row. Do you see any issues with that?

If I understand you correctly you want to take column count from row above current .ui-sortable-placeholder ?

For example we have:

<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>

so if .ui-sortable-placeholder is after first row it would have colspan="2" and if after second colspan="3" ?

If that's what you mean I think it would solve the issue

To be honest I can't realy imagine why people would want different numer of columns per row

Table are always rendered with maximum number of columns

So I think if we would calculate maxium numer od columns from all rows it would be even better solution

Rows are not always rendered with the same number of tds. Imagine the first row had colspan=2 on one of those td elements.

So I think if we would calculate maxium numer od columns from all rows it would be even better solution

The performance of this degrades linearly with the number of rows.

Rows are not always rendered with the same number of tds. Imagine the first row had colspan=2 on one of those td elements.

oh you're right, so it would have to take into account eventual colspan's from all columns...

I guess if it would calculate number of columns from the row before .ui-sortable-placeholder it would be ok for most cases

or... it could calcalate maximum number of columns once, not each time when .ui-sortable-placeholder is created but just once when plugin starts and the applied this previously calculated value to -placeholder

but then again.. when someone adds a column dynamically with JS it would have to have an event to recalculate this number

I just tried removing colspan="99" from code, and this solution (with just one column on placeholder) also seems to be working fine

if ( nodeName === "tr" ) {
	// Use a high colspan to force the td to expand the full
	// width of the table (browsers are smart enough to
	// handle this properly)
	element.append( "<td> </td>" );
} else if ( nodeName === "img" ) {
	element.attr( "src", that.currentItem.attr( "src" ) );
}

In older jQuery UI versions it wasn't even creating <td> element within placeholder <tr> and it wasn't giving any problems.

Someone must have recently added this colspan="99" for some unknown reason..

It was me; it wasn't working fine and it's not an unknown reason: https://github.com/jquery/jquery-ui/commit/bd47bd4ace3789d9eb302b0dce6f6e042d08a7f1

So... this is fixed?

No, this is broken with table-layout: fixed. At least, that's the claim. I haven't checked yet and there was no test case provided.

check this out, I wrote a fix

element: function() {

	var nodeName = that.currentItem[0].nodeName.toLowerCase(),
		element = $( that.document[0].createElement( nodeName ) )
			.addClass(className || that.currentItem[0].className+" ui-sortable-placeholder")
			.removeClass("ui-sortable-helper");
			
	if ( nodeName === "tr" ) {
		
		// calculate colspan
		var colspan = 0;
		$("td", that.currentItem[0]).each(function() {
			colspan += ($(this).attr('colspan') ? parseInt($(this).attr('colspan')) : 1);
		});

		element.append( "<td colspan='" + colspan + "'> </td>" );
	} else if ( nodeName === "img" ) {
		element.attr( "src", that.currentItem.attr( "src" ) );
	}

	if ( !className ) {
		element.css( "visibility", "hidden" );
	}

	return element;
},

it solves everything (at least in my case)

what do you think ?

I think we still don't have a test case (visual or unit). I'm not seeing any difference between table-layout: fixed and table-layout: auto in my simple test. Can you provide an example showing the difference on jsbin or jsFiddle?

On a side note, please do not paste large blocks of code into the ticket (as mentioned in the red box).

no problem but jsFiddle uses UI v1.9.2 so it's not good testing place

I wrote simple example that demostrates this issue:

http://74.220.219.73/~naszedzi/upload/sortable/test.html

and here's screenshot how it looks when you grab handle (tested on Firefox 19.0.2)

http://74.220.219.73/~naszedzi/upload/sortable/test-screen.png

jsfiddle can accept any javascript file: just include

<script src=""></script>

and you should be good to go.

oh didn't know :)

here:

http://jsfiddle.net/5SCnJ/

(btw. I've tested on Chromium 25 and it's got same issue)

Thanks. Reduced: http://jsfiddle.net/5SCnJ/1/

Sortable: Copy the cell structure when sorting a table row. Fixes #9185 - Sortable: Placeholder breaks table-layout: fixed.

Changeset: 09b3533910e887377fc87126608db1ded06f38f6

Sortable: Copy the cell structure when sorting a table row. Fixes #9185 - Sortable: Placeholder breaks table-layout: fixed.

(cherry picked from commit 09b3533910e887377fc87126608db1ded06f38f6)

Changeset: 9711c54c6d3d7ecffa9bfccc205522be1f4aa148