header width issue

florante

Hi,

i have several tables on one page. The page has tabs . In one of the tabs, it has another nested tabs which contains this table

http://farm5.static.flickr.com/4022/4710451596_0b4bdc7625.jpg

As you can see that , the table header is not the same width with the body.If I show the sort buttons and do a sort, the header get fix(after sorting).If I call a fnDraw, the header would not get aligned again until I do a sort.

Any idea?

thanks

Florante

florante

here is the firebug capture

http://farm5.static.flickr.com/4032/4710615518_360255618b_b.jpg

denne

I have exactly the same problem. The first time I render the page every width in the header is set to 0px.
Sorting the table adjusts the columns properly exactly like your app. I tried to call fnDraw and fnAdjustColumnSizing after the table have been created but doesnt fix anything.

Did you find any solution?

denne

calling fnAdjustColumnSizing does force the columns and header to adjust to correct size exactly like sorting the table.

denne

must be something with my layout because when I ripped the datatable-code out of my main layout and put it into a separate clean page it works perfectly.

denne

Could be something about how I have added my datatable to a richfaces tabpanel rich:tab that is not visible when the user first opens the page. I added a call to fnAdjustColumnSizing when the user selects the datatable tab and the datatable is shown and that forces the table to be readjusted with widths of the header and columns like its supposed to.

denne

Hmm. I found out that in my case, it has something to do with the datatable being placed inside a because when I put it outside it works like it supposed to. It must have something to do with that its placed inside a rich:tab that is not initialized or visible. Because when I put the datatable inside the first visible rich:tab its works again.

denne

But no solution yet.

Jovan

My solution was to simply call click on header td:

[code]
$('#thName').click();
[/code]

and put it in onLoad

denne

yes. that would execute a sort i think and force a redraw but you could also accomplish the same with fnAdjustColumnSizing in onLoad?

denne

My problem has something to do with that when the initialization of the datatable is done, the table is not visible yet. the rich:tab is not selected and the components on that tab is not shown.

I added a button to the page that is always visible regardless of which tab that is selected, and added a fnAdjustColumnSizing call on click. If my tab with the datatable is selected and the datatable is visible, the headers and columns are adjusted properly when I click the button, and I can see in the firebug console that the fnDrawCallback was called.

If I deselect the rich:tab with the datatable and click the same button, I can still see in the firebug console that fnDrawCallback is called but when I switch back to the rich:tab with the datatable the headers and columns are still wrong with width:0px everywhere in the header and also all rows has the wrong cell sizes.

Jovan

You could call fnAdjustColumnSizing on tab switch, I'm having similar problem and still can't find what is making th to loose their width.

denne

yeah. that was my first solution, but my trouble is that all modifications to the tablerows is lost when fnAdjustColumnSizing. And Im doing reordering of the rows with jquery insertAfter and insertBefore calls on the elements in the datatable. This must be the wrong way to do this?

Im beginning to suspect that I just have to do it like fnAdjustColumnSizing on tab switch and do all data manipulations like moving rows up and down in the datatable by the datatable API (insert/remove) and not do anything on the table elsewhere. The the redraw event would possibly be called every time switches a tab but I hope that the data is consistent and redrawn like it was.

denne

Found this explanation to the problem: http://datatables.net/examples/api/tabs_and_scrolling.html

indu2014

I faced similar issue in adjusting width and height in smaller view of datatable. By using nowrap at header level solve my problem.

below changes added in css file.

div.dataTables_sort_wrapper{white-space:nowrap !important;}
th{white-space:nowrap !important;}

then

dataTables_scrollBody{} here , height need to adjusted using firebug.

Regards,
Indu