Table display incorrect until column header is clicked

galcott

I posted this 4 days ago and haven't gotten an answer so I'm trying again.

One of my tables is being displayed incorrectly, with 2 problems:
1) Column headers are misaligned.
2) A column containing 2 icons is too narrow, so that the icons display vertically instead of horizontally.
This display is shown in the first screen shot. As soon as I click on a column header the display changes to the way it should be, as in the second screen shot. I have 2 other tables that do not have this problem although they are defined almost identically. Here is the code for the table:

dtFormulas = $('#tblFormulas').DataTable({
   ajax: 'sqlprocs.asp?proc=getformulas',
   language: {'emptyTable': 'No formulas found'},
   dom: '<"top"f>rt<"bottom"p><"clear">',
   paging: true,
   scrollY: '350px',
   scrollX : false,
   scrollCollapse : true,
   paging : false,
   select: {style: 'single'},
   columnDefs: [ {
     targets: 2,
     data: null,
     width: '50px',
     defaultContent: '<image src=edit.png title="Edit" class=editherb_png>&nbsp;<image src=delete.png title="Delete" class=deleteherb_png>'
           }
   ]
});

tangerine

I have 2 other tables that do not have this problem although they are defined almost identically.

"almost" identically? What are the differences?

allan

Very likely the table is being initialised hidden and then made visible. Is that the case? If so, you have to use columns.adjust() when the table is made visible.

Allan

galcott

Allan,

I'm not sure what you mean about being initialized hidden. But the table is inside a jQuery UI dialog widget and maybe that's the issue. I don't know how familiar you are with that plugin, but the dialog is created initially with autoOpen false, then opened when a particular button is clicked. So I've tried putting the line

dtFormulas.columns.adjust().draw();

in the open and focus events of the dialog but it doesn't work. Is there some other place I should put this code?

galcott

Ignore my previous message. It was a stupid error in my code. It's working now.