Opened 9 years ago
Closed 9 years ago
#14283 closed bug (notabug)
width() on table columns fails in IE due wrong rdisplayswap value
Reported by: | 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:
Change History (7)
comment:1 Changed 9 years ago by
comment:2 Changed 9 years ago by
Component: | unfiled → dimensions |
---|---|
Milestone: | None → 1.11/2.1 |
Priority: | undecided → low |
Status: | new → open |
Looks like this is valid and needs a further look.
comment:3 Changed 9 years ago by
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 9 years ago by
Owner: | set to dmethvin |
---|---|
Status: | open → assigned |
comment:5 Changed 9 years ago by
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 9 years ago by
Milestone: | 1.11/2.1 → 1.11.1/2.1.1 |
---|
comment:7 Changed 9 years ago by
Resolution: | → notabug |
---|---|
Status: | assigned → closed |
I'm going to close this as abuse of the <col>
element. As mentioned above, there is a simple workaround.
#14284 is a duplicate of this ticket.