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)
Change History (6)
Changed June 13, 2010 05:57PM UTC by comment:1
| component: | unfiled → dimensions |
|---|
Changed August 18, 2010 08:57PM UTC by 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 comment:3
| keywords: | width google chrome → width chrome |
|---|---|
| milestone: | 1.4 → 1.5 |
| priority: | major → low |
| status: | new → open |
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 comment:4
| owner: | → michal |
|---|---|
| status: | open → pending |
Changed November 11, 2010 11:09PM UTC by comment:5
| status: | pending → closed |
|---|
Automatically closed due to 14 days of inactivity.
Changed August 30, 2011 03:45PM UTC by 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.