Formatting Issue: Width of data table

jon.bluks

Hi,

I'm having a problem with a data table on one of my pages of an application. The rest of the pages, size the data table to 100% of the width, but one particular page doesn't. The column widths are like the minimum size, so the table looks all squished up on the left, instead of spread across the entire page. The only difference that I can see is that the datatable is in a div that is hidden before it is displayed, where as the others are not. Maybe that makes a difference in the calculations?

Any thoughts would be great. I can provide a url if that's helpful.

Jonathan

jon.bluks

Yep...that was it. Rendering in a hidden div caused the calculations to be off.

torenware

I'm also having problems with this, and what jon.bluks says is true: if the table is not displayed, the columns don't get a proper width (worse: in 1.4 I've found that they get style='width:0' appended to the th cells).

But this isn't it. Even if I make sure the div is visible before I render it (by showing the enclosing diff just before I call the initializer, dataTables still squishes itself to the left. But this time, arbitrary values for the widths get calculated, and my sWidth values are still ignored.

I'm defining my table as follows:
[code]
$('#contract-select-table').dataTable({
"bPaginate": false,
"bFilter": false,
"bProcessing": true,
"fnRowCallback": tc_select_modify_rows,
"aoColumns": [
{ "sWidth": "350px" },
{ "sWidth": "150px" },
],
});

[/code]

The call back is stamping an id into each row; the table gets created from data pulled in via AJAX, in a button's change handler.

The widths are ignored, and they are calculated, AFAICT, to match the width of the text in the header cells.

How do I get dataTables to stop being so smart, and force it to use the sWidth parameters I'm specifying.

I'm using 1.4.beta2, if IIRC.

allan

Hi,

What to do is to set bAutoWidth to false: http://datatables.net/usage/features#bAutoWidth . Oddly enough, exactly this came up in brianmm's thread earlier today: http://datatables.net/forums/comments.php?DiscussionID=491 . Basically it's down to the browser not calculating widths that it doesn't need to - widths that DataTables is looking for...

Regards,
Allan

torenware

Much thanks. Setting bAutoWidth to false does indeed cure the problem.

aggieben

I'm having a similar problem. here's my setup:

[code]
oTable = $('#discrepancy-results').dataTable({
'bAutoWidth': false,
'aoColumns': [
{ 'bVisible': false },
null,
{ 'sWidth': '84px' },
null,
{ 'sWidth': '84px' },
{ 'sWidth': '84px' },
{ 'sWidth': '100px' },
{ 'bSortable': false, 'sClass': 'recon' }
],
'bProcessing': true,
'bStateSave': false,
'oLanguage': {
'sSearch': 'Search all columns:'
}
});
[/code]

The rendered results have the table at 980 px, with each column at 157px, even though the rendered DOM does contain the inline styles as specified above (84px, 100px, etc). Why are the table and column widths still calculated?

allan

Hi aggieben,

DataTables shouldn't be doing any automatic width calculation with bAutoWidth:false and there is an error if it is. However, I've just tried your code and it seems to behave as expected for you. Are you using 1.5.4? Could you post an example showing the issue please?

Regards,
Allan

aggieben

This was part of an application for a client that I've been working on in SharePoint, so it's not very doable to get a working demo, but I saved a complete set of files enough to debug the rendering issues, I think. Try here:

http://bitthicket.com/discrep/

allan

Hi aggieben,

The issue here is not one to do with DataTables actually (thankfully :-) ), but more to do with the content that you are displaying in the table... You have an input box in each column, and that is forcing the width to be whatever the size of the default text box is. One way around this is to add width:100% to those input elements. The way to see that DataTables isn't doing any calculations is that there are now width styles (other than the ones you have specified in the initialisation) on the table or the TH elements.

Regards,
Allan

Morpheusxnl

Dear All,

I have the same issue. But in my case bAutowidth is already set to false. I have datatables in a embedded view. so when the page is loaded it is in one of the tabs. taking this in consideration that it gives the column headers a width of 0 means that it does not know or see that it is there. Is there anyone who could tell me how to fix this. So if i would click the tab and the datatables show that in renders the column headers properly.

Regards,
Marc

allan

Hi Marc,

Have a look at this demo of using DataTables with tabs, which uses a display hook and the fnAdjustColumnSizing API method to address this issue: http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html

Allan