Opened 5 years ago

Last modified 5 years ago

#10084 open bug

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.

Change History (5)

comment:1 Changed 5 years ago by tj.vantoll

Owner: set to kwyjibo
Status: newpending

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/

comment:2 Changed 5 years ago by kwyjibo

Status: pendingnew

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.

comment:3 Changed 5 years ago by kwyjibo

Hello again,

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

comment:4 Changed 5 years ago by kwyjibo

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.

comment:5 Changed 5 years ago by tj.vantoll

Status: newopen

Thanks kwyjibo. That reduced test case helps a lot.

Note: See TracTickets for help on using tickets.