CODEWITHSUNDEEP
jquerygoogle-chromefirefox-3
Alex Scordellis
Alex Scordellis

Reputation: 492

jQuery: Why do hidden table cells get (sort of) shown again when I measure their height in FF3 and Chrome

I can successfully hide some table cells using jQuery. When I then measure the height of a hidden cell, the space that the cell would occupy if not hidden appears as blank space, pushing all the remaining cells in that row across by one column. It's as if the the cell is reinserted in the table flow, but its content is hidden. The example below demonstrates the problem. Click "hide column 2" followed by "measure row 1 column 2" to see it happen. The example code is standalone - just save it as an HTML file.

This affects FF3 and Chrome, but not IE7.

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("a.clickToHide").click(function() { 
                $(".col2").hide(); 
            });
            $("a.clickToMeasure").click(function() { 
                $("span.result").text($("tr.row1 td.col2").height()); 
            });
        });
    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th class="col1"> Column 1 </th>
                <th class="col2"> Column 2 </th>
                <th class="col3"> Column 3 </th>
            </tr>
        </thead>
        <tbody>
            <tr class="row1">
                <td class="col1"> Column 1 </th>
                <td class="col2"> Column 2 </th>
                <td class="col3"> Column 3 </th>
            </tr>
            <tr class="row2">
                <td class="col1"> Column 1 </th>
                <td class="col2"> Column 2 </th>
                <td class="col3"> Column 3 </th>
            </tr>
        </tbody>
    </table>
    <a class="clickToHide" href="#">Click to hide column 2</a> <br />
    <a class="clickToMeasure" href="#">Click to measure row 1 column 2</a> <br />
    <span class="result"></span>
</body>

Upvotes: 1

Views: 1282

Answers (2)

Joey Hewitt
Joey Hewitt

Reputation: 120

I just found this issue today as well (Chrome 12.0.742.91.) Here's the simplest valid code I could make that demonstrates the issue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Chrome table cell bug</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $(document.body).click(function() {
                    $('tr:first>td:last').css('width');
                });
            });
        </script>
        <style type="text/css">
            thead td { padding-bottom: 100px; background-color: red; }
        </style>
    </head>
    <body>
        <table style="width: 100%;">
            <thead>
                <tr>
                    <td></td>
                    <td style="display: none;"></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td style="display: none;"></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

When the page loads, click somewhere on the red bar (all TDs have red BG), and just by measuring the width of a hidden cell, the red bar will get compressed.

I may report this to jQuery and/or Google, but for now the workaround I did was to replace $el.width() with $el.is(':visible') ? $el.width() : 0 for table cells that may be hidden.

Upvotes: 1

Steve Davis
Steve Davis

Reputation: 716

Interesting results while looking into this. First, you can accomplish what you want by refining your selector.

Second, I decided to dig into the jquery source to understand why your selector causes the issue. What I found was that the table cell is being made visible "display: block;" in the "swap" function. It appears to do so do get correct calculations (comments). After it is made visible and calculations are performed correctly the function attempts to revert the visible status back. But the reversing doesn't take affect. I think it's definitely a browser issue because the object values are accurate.

Upvotes: 1

Related Questions