Bug Tracker

Opened 11 years ago

Closed 10 years ago

Last modified 8 years ago

#5388 closed bug

.width() doesn't work properly in Google Chrome

Reported by: michal Owned by: michal
Priority: low Milestone: 1.5
Component: dimensions Version: 1.3.2
Keywords: width chrome Cc:
Blocked by: Blocking:

Description

Browser: Google Chrome 3.0.195.21 ================== Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> $(document).ready(function() {

$('td').each(function() {

$(this).width(); when this line is commented - everything seems to be okay on google chrome $(this).css('width','100px');

});

}); </script> <style> th,td {width: 100px; background: yellow;} .hidden {display: none;} </style> <table> <thead><tr><th>1</th><th class="hidden">2</th><th>3</th></thead> <tbody><tr><td>4</td><td class="hidden">5</td><td>6</td></tbody> <tfoot><tr><td>7</td><td class="hidden">8</td><td>9</td></tfoot> </table>

============== When $(this).width() is executed then width for selected cell is set, even if it should return only a value of this width. [file 1.jpg]

I don't know if it's also a bug in Google Chrome, but when I try to set width with $(this).css('width','100px') I don't have this problem.

When I comment $(this).width() everything is fine [file 2.jpg]

Attachments (3)

1.jpg (20.8 KB) - added by michal 11 years ago.
width() is executed
2.jpg (20.6 KB) - added by michal 11 years ago.
width() is commented
hiddenheader.html (637 bytes) - added by michal 11 years ago.

Download all attachments as: .zip

Change History (9)

Changed 11 years ago by michal

Attachment: 1.jpg added

width() is executed

Changed 11 years ago by michal

Attachment: 2.jpg added

width() is commented

Changed 11 years ago by michal

Attachment: hiddenheader.html added

comment:1 Changed 10 years ago by dmethvin

Component: unfileddimensions

comment:2 Changed 10 years ago by egoodberry

I've run into this in the past; I believe the problem is more specifically related to the visibility of the table cell in question. The requirements seem to be: Google Chrome browser, in the context of a loop, working with TD or TH elements (table cells), one more more of said table cells is hidden from view (style="display:none;"). This causes some sort of assignment to occur; invisible but space-filling elements seem to be inserted into the DOM.

The only workaround for this issue of which I am aware is to find out whether or not the table cell in question is visible prior to calling its .width() function.

Hope this helps.

comment:3 Changed 10 years ago by SlexAxton

Keywords: google removed
Milestone: 1.41.5
Priority: majorlow
Status: newopen

Could you provide a live test case for this in a jsfiddle, we would greatly appreciate it.

Thanks!

comment:4 Changed 10 years ago by SlexAxton

Owner: set to michal
Status: openpending

comment:5 Changed 10 years ago by trac-o-bot

Status: pendingclosed

Automatically closed due to 14 days of inactivity.

comment:6 Changed 9 years ago by nameofemail@…

Please re-open this ticket. I have created a JSfiddle example for it here:

http://jsfiddle.net/rw123948/KGxbk/

The sample alerts the widths of several <col> elements. I have tested and it does work when you use <td> elements, but if you compare with Firefox, which does read the widths of <col> elements, you can see that there is a Chrome specific bug that causes the script to return 0 instead of the actual width.

Note: See TracTickets for help on using tickets.