Column width set to 133px in Chrome, even if it doesn't need to.

CGRemakes

Not sure what's causing this, whether it's FixedColumns, Datatables, or something of my own doing. For whatever reason, the column width in Chrome is set to 133px, even if the content could easily fit in a smaller width. It does stretch it to a larger size if needed, but it's almost like the minimum width is 133px. IE and Firefox both display correctly, though. I'd like it to just be the size of the largest amount of data. bAutoWidth is set to false.

EDIT: Ah, figured it out. It's because I have a searchable column input in the footer, so it's stretching to fit that. My workaround is to set the input boxes to 1px by default and a class of "search_box", and in the fnDrawCallback, I have the following code (any suggestions are certainly welcome):

[code]

$('.search_box').each(function(){

$(this).css('width', $(this).parent().css('width'));
});
[/code]

allan

Another option might be to use a little bit of CSS to set the width of the input element. However, the JS looks as good as anything and calculates it dynamically and correctly.

Allan

CGRemakes

Hmmm, my solution works fine when the table is initially drawn, but if I apply a filter that displays new data, the width of the footer container does not decrease, so the width of the input remains unchanged as well. If the change in filter results in the column width being larger, the container stretches, but the input size doesn't adjust accordingly. It's almost like the code gets executed before the container stretches, so it just applies the old value. I'd like it to always collapse/stretch to the correct size. This is how it behaves in other browsers. Any suggestions?

allan

To be honest, this is a bit of a mine-field, so my only suggest really is to try various combinations and see what works. It is worth pointing out that FixedColumns' fixed columns are _not_ designed to have their width dynamically altered. I think it is possible using the API in 2.5 but it is an area which is not particularly well used or tested.

Allan

CGRemakes

Gotcha. Well, this is my workaround that seems to work quite well, albeit a bit cludgy:

This is in the fnFooterCallback:

[code]

"fnFooterCallback": function(){

$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());

if($.browser.chrome)
{
$('tfoot input').each(function(){

var width = parseInt($(this).parent().css('width')) - 4;

$(this).css('width', "50px");
});

setTimeout(redraw_footer, 1);
}
}

[/code]

I then have the redraw_footer function (I subtract 4 because I have borders that throw it off):

[code]

function redraw_footer()
{
$('tfoot input').each(function(){

var width = parseInt($(this).parent().css('width')) - 4;

$(this).css('width', width + "px");
});
}

[/code]

It seems to require setting the correct width from a setTimeout, even if the value is 1. Not sure why? Since Chrome seems to be the only one with the issue, I only do this workaround in Chrome.