search

markmalek / Fixed-Header-Table

jQuery plugin for tables with fixed headers
www.fixedheadertable.com
MIT License
930 stars 541 forks source link

fixedColumn not freezing first column, fixedColumns:2 hiding table #27

Open gregpinero opened 12 years ago

gregpinero commented 12 years ago

Nothing seems to happen when I use this: $('#result_list').fixedHeaderTable({ footer: false, cloneHeadToFoot: false, fixedColumn: true});

And when I use this, the table dissapears :-( $('#result_list').fixedHeaderTable({ footer: false, cloneHeadToFoot: false, fixedColumns: 2});

I can send you my HTML. I'll paste the pertinent parts below:

Head section:

<head>
<title>Select Virus Prep. to change | Virus Tracker Site Admin</title>
<link rel="stylesheet" type="text/css" href="/media/admin/css/base.css" />

  <link rel="stylesheet" type="text/css" href="/media/admin/css/changelists.css" />

    <link rel="stylesheet" type="text/css" href="/media/admin/css/forms.css" />

    <script type="text/javascript" src="/admin/jsi18n/"></script>

  <link href="/media/fixed_header_table/css/defaultTheme.css" type="text/css" media="all" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="/media/janelia_admin.css" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/media/admin/css/ie.css" /><![endif]-->

<script type="text/javascript">window.__admin_media_prefix__ = "/media/admin/";</script>

<script type="text/javascript" src="/media/admin/js/core.js"></script>
<script type="text/javascript" src="/media/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/media/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/media/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/media/admin/js/actions.min.js"></script>

<script type="text/javascript" src="/media/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/media/list_filter_collapse.js"></script>
<script type="text/javascript" src="/media/decimal_to_sci_not.js"></script>
<script type="text/javascript" src="/media/fixed_header_table/lib/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/media/fixed_header_table/jquery.fixedheadertable.min.js"></script>
<script type="text/javascript" src="/media/freeze_cols.js"></script>
<script type="text/javascript" src="/media/admin/js/calendar.js"></script>
<script type="text/javascript" src="/media/admin/js/admin/DateTimeShortcuts.js"></script>

<script type="text/javascript">
(function($) {
    $(document).ready(function($) {
        $("tr input.action-select").actions();
    });
})(django.jQuery);
</script>

<meta name="robots" content="NONE,NOARCHIVE" />
</head>

Table is formatted like this:

<table cellspacing="0" id="result_list">
<thead>
<tr>
<th>...</th>
...
</tr>
</thead>
<tbody>
<tr>...</tr>
...
</tbody>
</table>

freeze_cols.js contains:

$(document).ready( function () {
    $('#result_list').fixedHeaderTable({ footer: false, cloneHeadToFoot: false, 
        fixedColumn: true});
});
markmalek commented 12 years ago

What version of the plugin are you using? Did you download the latest version through github or from my demo site?

(I'm running an older version on my demo site which I need to update which doesn't support multiple fixed columns)

If you are using the latest hosted through github then there may be something else going on. Perhaps a conflict with another script. Can you send me more detailed table markup?

xeromorph commented 12 years ago

same goes for me, using last minified version of master branch. tested against most simple markup

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="/defaultTheme.css" rel="stylesheet" type="text/css">
    <script src="/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
    <script src="/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
    <script src="/jquery.fixedheadertable.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#fixedTable").fixedHeaderTable({
               fixedColumns: 4
            });
        });
    </script>
</head>
<body>
<div>
<table id="fixedTable">
        <thead>
            <tr>
                <th></th>
                ...over 20 columns
                <th></th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td></td>
                    ...
                    <td></td>
                </tr>
        </tbody>
        <tfoot>
            <tr>
                <th></th>
                ...
                <th></th>
            </tr>
        </tfoot>
    </table>
</div>
</body>
</html>

makes given table invisible generating following code

<div class="fht-table-wrapper fht-default" style="width: 100%; height: 100%; ">
<div class="fht-fixed-column" style="height: 0px; width: 331px; ">
<div class="fht-thead">
<table class="fht-table">
<thead>
<tr>
<th style="height: 70px; width: 99px; "><div class="fht-cell" style="width: 99px; "></div></th>
<th style="height: 70px; width: 97px; "><div class="fht-cell" style="width: 97px; "></div></th>
<th style="height: 70px; width: 38px; "><div class="fht-cell" style="width: 38px; "></div></th>
<th style="height: 70px; width: 97px; "><div class="fht-cell" style="width: 97px; "></div></th>
</tr>
</thead>
</table></div>
<div class="fht-tbody" style="margin-top: -1px; height: 167px; ">
<table class="fht-table">
<tbody>
<tr>
<td style="height: 161px; width: 99px; "></td>
<td style="height: 161px; width: 97px; "></td>
<td style="height: 161px; width: 38px; "></td>
<td style="height: 161px; width: 97px; "></td>
</tr>
</tbody>
</table></div>
</div>
<div class="fht-fixed-body" style="width: 1920px; ">
<div class="fht-thead">
<table class="fht-table">
<thead>
            <tr>
                <th style="height: 70px; width: 99px; "><div class="fht-cell" style="width: 99px; "></div></th>
                <th style="height: 70px; width: 97px; "><div class="fht-cell" style="width: 97px; "></div></th>
                <th style="height: 70px; width: 38px; "><div class="fht-cell" style="width: 38px; "></div></th>
                <th style="height: 70px; width: 97px; "><div class="fht-cell" style="width: 97px; "></div></th>
                <th><div class="fht-cell" style="width: 82px; "></div></th>
                <th><div class="fht-cell" style="width: 101px; "></div></th>
                <th><div class="fht-cell" style="width: 93px; "></div></th>
                <th><div class="fht-cell" style="width: 86px; "></div></th>
                <th><div class="fht-cell" style="width: 88px; "></div></th>
                <th><div class="fht-cell" style="width: 72px; "></div></th>
                <th><div class="fht-cell" style="width: 84px; "></div></th>
                <th><div class="fht-cell" style="width: 84px; "></div></th>
                <th><div class="fht-cell" style="width: 105px; "></div></th>
                <th><div class="fht-cell" style="width: 46px; "></div></th>
                <th><div class="fht-cell" style="width: 61px; "></div></th>
                <th><div class="fht-cell" style="width: 81px; "></div></th>
                <th><div class="fht-cell" style="width: 61px; "></div></th>
                <th><div class="fht-cell" style="width: 61px; "></div></th>
                <th><div class="fht-cell" style="width: 94px; "></div></th>
                <th><div class="fht-cell" style="width: 92px; "></div></th>
                <th><div class="fht-cell" style="width: 73px; "></div></th>
                <th><div class="fht-cell" style="width: 69px; "></div></th>
                <th><div class="fht-cell" style="width: 103px; "></div></th>
                <th style="padding-right: 17px; "><div class="fht-cell" style="width: 133px; "></div></th>
            </tr>
        </thead></table></div><div class="fht-tbody"><table id="fixedTable" style="width: 1903px; margin-top: -70px; " class="fht-table fht-table-init">
        <thead>
            <tr>
                <th><div class="fht-cell" style="width: 99px; "></div></th>
                <th><div class="fht-cell" style="width: 97px; "></div></th>
                <th><div class="fht-cell" style="width: 38px; "></div></th>
                <th><div class="fht-cell" style="width: 97px; "></div></th>
                <th><div class="fht-cell" style="width: 82px; "></div></th>
                <th><div class="fht-cell" style="width: 101px; "></div></th>
                <th><div class="fht-cell" style="width: 93px; "></div></th>
                <th><div class="fht-cell" style="width: 86px; "></div></th>
                <th><div class="fht-cell" style="width: 88px; "></div></th>
                <th><div class="fht-cell" style="width: 72px; "></div></th>
                <th><div class="fht-cell" style="width: 84px; "></div></th>
                <th><div class="fht-cell" style="width: 84px; "></div></th>
                <th><div class="fht-cell" style="width: 105px; "></div></th>
                <th><div class="fht-cell" style="width: 46px; "></div></th>
                <th><div class="fht-cell" style="width: 61px; "></div></th>
                <th><div class="fht-cell" style="width: 81px; "></div></th>
                <th><div class="fht-cell" style="width: 61px; "></div></th>
                <th><div class="fht-cell" style="width: 61px; "></div></th>
                <th><div class="fht-cell" style="width: 94px; "></div></th>
                <th><div class="fht-cell" style="width: 92px; "></div></th>
                <th><div class="fht-cell" style="width: 73px; "></div></th>
                <th><div class="fht-cell" style="width: 69px; "></div></th>
                <th><div class="fht-cell" style="width: 103px; "></div></th>
                <th><div class="fht-cell" style="width: 133px; "></div></th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td style="height: 161px; width: 99px; "></td>
                    <td style="height: 161px; width: 97px; "></td>
                    <td style="height: 161px; width: 38px; "></td>
                    <td style="height: 161px; width: 97px; "></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
        </tbody>
        <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>
    </table></div></div></div>
    </div>

it breaks unless height stated explicitly

jeffersonbezerra commented 9 years ago

no one fixed this yet?

solenovex commented 7 years ago

still no one fixed this yet?