Skip to main content

Bug Tracker

Side navigation

#5388 closed bug ()

Opened October 16, 2009 10:33AM UTC

Closed November 11, 2010 11:09PM UTC

Last modified March 10, 2012 12:19PM UTC

.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 October 16, 2009 10:34AM UTC.

    width() is executed

  • 2.jpg (20.6 KB) - added by michal October 16, 2009 10:34AM UTC.

    width() is commented

  • hiddenheader.html (0.6 KB) - added by michal October 16, 2009 10:41AM UTC.
Change History (6)

Changed June 13, 2010 05:57PM UTC by dmethvin comment:1

component: unfileddimensions

Changed August 18, 2010 08:57PM UTC by egoodberry comment:2

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.

Changed October 23, 2010 11:50PM UTC by SlexAxton comment:3

keywords: width google chromewidth chrome
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!

Changed October 23, 2010 11:50PM UTC by SlexAxton comment:4

owner: → michal
status: openpending

Changed November 11, 2010 11:09PM UTC by trac-o-bot comment:5

status: pendingclosed

Automatically closed due to 14 days of inactivity.

Changed August 30, 2011 03:45PM UTC by nameofemail@gmail.com comment:6

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.