Fixed Header Problem, js get a wrong width?

Erimus

http://erimus.cc/media_analyzer/fake_comments.html
When I open the page on iPhone se simulator(width:320px),
the fixed header looks wilder than the original one.

I've check it and try add a line in js file:

_modeChange: function ( mode, item, forceChange )
    {
        var dt = this.s.dt;
        var itemDom = this.dom[ item ];
        var position = this.s.position;
        console.log(position.width+'|'+$('.dataTables_wrapper').width()) //I added this

And I got:

401|400

On real phone, it's 410|400.
Whatever, the fixedHeader got a bigger size.

Had I do something wrong?

colin

Hi @Erimus ,

That page is just returning text. Could you fix that please so it demonstrates the problem.

Cheers,

Colin

Erimus

Sorry, it’s my fault. the link should be:
http://erimus.cc/media_analyzer/fake_comments.min.html
Ignore the chinese contents.

And it can be reappear by PC browser with a width <350px.
It maybe a problem with datatables, try to do belows:

• Open browser console panel.
• Open the page with a width=350px browser window
• The header will looks wider than the window, and console shows 401|350.
• Scroll down, then scroll to top.
• The header will be just fit the window. console also print 401|350.
• But if change the width of browser, console will print same width.

I think it maybe not cause be fixedHeader, it maybe a problem with datatables self, like auto width or something else.

I'm not very familiar with the datatables, how can I get a fit width at first?
Please teach me.

Erimus

Ah, maybe I got it.
I've set a min-width on th, but it looks removed by datatables.js, so scroll down, and scroll up, the mix-width limit disappear, so width changed.
Now, I've moved the limit to css.

allan

Hi,

You've got a colspan in the cells in your tbody of your table. Unfortunately that isn't valid for DataTables at the moment. In fact I'm really surprised that it isn't throwing an error about it.

The tbody cells must be just default colspan=1 and rowspan=1.

Allan

Erimus

@allan thanks for you answer, but I found the real problem is width limit.

render multi columns in one + hide some column,
will looks better on mobile, there is not too many width to show many columns.
And it works good on table data.

I do even hide 2 columns for sort, because the render column sort result will be wrong with sorting string, not number.