ScrollX Disables my CSS for the TableHead???

Squall413

Hey Guys!

Im currently making a Website (pokemon database) for a course at university. As Im new to DataTables (and Webdevelopement at all), Im not too experienced.

Heres my Problem:

Ive tried to make the datatables more responsive. Thus i found out, that i'd have to set "autoWidth" to false. In addition to this I wanted to add a horizontal (maybe even vertical) scrollPane, via "scrollX: true". But as soon as i set scrollX to true in my .js file, it somehow disables my (own) css for the tablehead.

 $(document).ready(function() {
    var pkmnAttacks = $('#pkmnAttacks').DataTable({
    
        "autoWidth" : false,
        scrollX: false,
        
        columnDefs: [
        {
            className: "dt-center", targets: [1,2,3,4,5],
            orderable: false, targets: [2]
        }
        ],
            
        aoColumns: [
        {
            mData: "gerName",
            className: "tg-yw4l"
        },
        {
            mData: "engName",
            className: "tg-j2zy"
        },
        {
            mData: "type",
            render: function(data, type, row) {
                return "<img src ='images/Types/" + data.typName + ".png'>";
            },
            className: "tg-yw4l"
        },
        {
            mData: "category",
            className: "tg-j2zy"
        },
        {
            mData: "str",
            className: "tg-yw4l"
        },
        {
            mData: "gena",
            className: "tg-j2zy"
        },
        {
            mData: "ap",
            className: "tg-yw4l"
        },
        ],
        ajax: {
            url: "http://localhost:8080/attacks"
        }
    });
    
    $('#pkmnAttacks').addClass("tg");
    $('#pkmnAttacks').find("th").removeClass("tg-j2zy tg-yw4l");
    console.log($('#pkmnAttacks'));
})

Heres the css my project partner created for class tg (sorry for horrible formatting):

.tg  {border-collapse:collapse;border-spacing:0;border-color:#aaa;margin:0px auto;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 22px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#aaa;color:#333;background-color:#fff;border-top-width:1px;border-bottom-width:1px;}
.tg th{text-align: center; font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 22px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#aaa;color:#fff;background-color:#f38630;border-top-width:1px;border-bottom-width:1px;}
.tg .tg-j2zy{text-align:center;background-color:#FCFBE3;vertical-align:top}
.tg .tg-qsvf{text-align:center;font-size:18px;vertical-align:top}
.tg .tg-yw4l{text-align:center;vertical-align:top}

allan

Thus i found out, that i'd have to set "autoWidth" to false.

Can you tell me where you found that? Its not true I'm afraid. Perhaps it was once in the mists of time, but certainly not now. I would always recommend keeping that option enabled, particularly if you are using scrolling.

Make sure you have width="100%" or style="width:100%" on your <table> tag.

Beyond that, with the CSS issue we'd really need a link to a test case showing the issue.

My guess is that the issue is related to the fact that when you use scrolling the table is split into two or three element parts. A header table, body and optionally a footer. It has to be done that way to allow the body to scroll. The original id is only on the body table. Thus $('#pkmnAttacks') would not select the visible header. Use table().header() to get the thead element for the header, regardless of scrolling.

Allan

Squall413

Hey Allan!

Thank you a lot already. I'm now able to access the thead again.
Also I have changed autoWidth to true again, it still works. Not sure where I found that, but most likely a stack overflow question.

A "new" problem is, that now the <thead> appears to be smaller than it should be, unless I resize the page. Afterwards it has the correct size again... (See the 2 images on the bottom for further information)

It works like this:
wrong size -> minimize page
good looking size on small page -> maximize again
good looking size on big page

I have tried setting width to 100% in various ways, but that didnt solve the case.

allan

Is the table being initialised hidden? If so use columns.adjust() when it is made visible.

Allan

Squall413

Thank you! That totally fixed the issue now