Bug Tracker

Opened 6 years ago

Closed 5 years ago

#14283 closed bug (notabug)

width() on table columns fails in IE due wrong rdisplayswap value

Reported by: deanasnyder@… Owned by: dmethvin
Priority: low Milestone: 1.11.1/2.1.1
Component: dimensions Version: 1.10.2
Keywords: Cc:
Blocked by: Blocking:

Description

I added jQuery-based code to an html table that allows you to live-resize its columns by dragging in the header. It works in Firefox, Chrome, Safari, & Opera, but fails in Internet Explorer - on mousedown the columns (wrongly) resize in IE and on mousemove the last column resizes no matter which column you click and drag.

I believe I have tracked the bug down to jQuery's width() function and in particular to its rdisplayswap.test() and the value of the rdisplayswap variable:

rdisplayswap = /(none|table(?!-c[ea]).+)/

According to the jQuery comments:

certain elements can have dimension info if we invisibly show them however, it must have a current display style that would benefit from this

And the comment on the rdisplayswap definition says:

swappable if display is none or starts with table except "table", "table-cell", or "table-caption"

I think determining swappability should also include "table-col", and since it doesn't that's why, for some reason, the jQuery width() function exhibits anomalous behavior in IE.

I tried changing

rdisplayswap = /(none|table(?!-c[ea]).+)/

to

rdisplayswap = /(none|table(?!-c[eao]).+)/

and that fixed the problem in IE; but broke column re-sizing in all other browsers!

How can this be fixed?

(I am testing jQuery 1.10.2 in "recent" non-IE browsers [on Mac OS X], and in IE 6, 9, and 10 [on Windows XP, 7, & 8].)

See an example at:

<http://jsbin.com/OKEF/1/edit?html,output>

or:

<http://www.beforeunless.com/pages/dynamicTable-minimum>

Change History (7)

comment:1 Changed 6 years ago by timmywil

#14284 is a duplicate of this ticket.

comment:2 Changed 6 years ago by dmethvin

Component: unfileddimensions
Milestone: None1.11/2.1
Priority: undecidedlow
Status: newopen

Looks like this is valid and needs a further look.

comment:3 Changed 5 years ago by anonymous

IE 11 preview seems to have much better behavior and the resizing works. However, the columns 'jump' as soon as you click the dragger but after that initial blip, things snap back to your cursor position.

comment:4 Changed 5 years ago by dmethvin

Owner: set to dmethvin
Status: openassigned

comment:5 Changed 5 years ago by dmethvin

I'm not sure that the <col> element is supposed to be used this way. It's primarily a means for classes and attributes to be attached to the corresponding elements in the column, and for columns to be grouped.

A <col> element never occupies any real width in the document, so I'm inclined to say that asking for its width is bogus and anything we try to do to measure it is wrong.

The problem can be easily worked around by measuring the width of a real element in the table such as the header: http://jsbin.com/iHOlAzEV/1/

Spec references:

http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4

http://www.w3.org/TR/html5/tabular-data.html#the-colgroup-element

Thoughts, anyone?

comment:6 Changed 5 years ago by dmethvin

Milestone: 1.11/2.11.11.1/2.1.1

comment:7 Changed 5 years ago by dmethvin

Resolution: notabug
Status: assignedclosed

I'm going to close this as abuse of the <col> element. As mentioned above, there is a simple workaround.

Note: See TracTickets for help on using tickets.