#10084 open bug ()

Opened June 03, 2014 10:03AM UTC

Last modified June 03, 2014 07:10PM UTC

Sortable: Breaks table layout when sorting (table-layout: fixed, and fixed width cell)

Reported by: kwyjibo Owned by: kwyjibo
Priority: minor Milestone: none
Component: ui.sortable Version: 1.10.4
Keywords: Cc:
Blocked by: Blocking:
Description

Hello,

This may be related to bug #9185, but with a twist. In a table with table-layout: fixed, that has one or more cells with a fixed width, the layout breaks as soon as the user starts sorting. You can test in this fiddle:

http://jsfiddle.net/gPxxy/1/

As you can see, it does not matter if the fixed width is set with a class or inline style, nor if you apply it to every cell in the column.

Also note that, if you sort one row from the table with table-layout: auto, and then you go to sort one row from the fixed one, does not breaks the layout... Weird. But it breaks if you keep sorting.

Attachments (0)
Change History (5)

Changed June 03, 2014 02:07PM UTC by tj.vantoll comment:1

owner: → kwyjibo
status: new → pending

Hi kwyjibo,

Thanks for taking the time to contribute to jQuery UI. Just to clarify, you're referring to the table itself being shifted, and not the display of the helper, correct?

Interestingly enough if I define a custom helper this works fine in all scenarios: http://jsfiddle.net/tj_vantoll/gPxxy/3/

Changed June 03, 2014 02:22PM UTC by kwyjibo comment:2

status: pending → new

Yes, that's it. The problem is with the table itself, its layout gets broken.

I forgot to include a css style in the definition, this new fiddle, updated from yours, I think it clearly shows the bug:

http://jsfiddle.net/gPxxy/5/

The third and foruth table has the cell width defined with an inline style, with no difference.

Changed June 03, 2014 04:27PM UTC by kwyjibo comment:3

Hello again,

I just want to add that the table layout only get broken when you drag the first element...

Changed June 03, 2014 04:38PM UTC by kwyjibo comment:4

Ok, I updated the fiddle trying to focus in the bug I am seeing.

http://jsfiddle.net/gPxxy/6/

In this new feedle, when you drag the first element, the layout gets broken. But dragging any of the other rows, does not change the layout.

Also, the helper does not keep its width, but I know I should set the width to the helper to avoid this.

Changed June 03, 2014 07:10PM UTC by tj.vantoll comment:5

status: new → open

Thanks kwyjibo. That reduced test case helps a lot.