Table columns resize only scales width up

gregi

Hi Team,

i've got the problem that my DataTable Columns only scale up. They have a minimal size of 205px and they will not resize to fit if the required size is smaller than that.
I can't find the setting where this value is fixed.

Therefor my table scales out of the size of the containing div.

Here is my code.
[code]




Id
Uid
RowVersion
Kuerzel
Kurzbezeichnung
Langbezeichnung
GueltigVon
GueltigBis


























var asInitVals = new Array();
$(document).ready(function(){

var oTable = $('#WertebereichSortiertDialogTable').dataTable({
"sAjaxSource": "/WertebereichSortiert/Klassenstufe/IndexAjax",
"bAutoWidth": false,
"bScrollAutoCss": true,
"aoColumns" : [
{
"sWidth": "80px",
"sFilterType": "text",
"sName": "Id",
"bSearchable": false,
"bSortable": false,
"fnRender": "function(oObj) { var columnIndex=0; var value=oObj.aData[columnIndex]; return value; } ",
"bVisible": false
},
{
"sWidth": "80px",
"sFilterType": "text",
"sName": "Uid",
"bSearchable": false,
"bSortable": false,
"fnRender": "function(oObj) { var columnIndex=1; var value=oObj.aData[columnIndex]; return value; } ",
"bVisible": false
},
{
"sWidth": "80px",
"sFilterType": "text",
"sName": "RowVersion",
"bSearchable": false,
"bSortable": false,
"fnRender": "function(oObj) { var columnIndex=2; var value=oObj.aData[columnIndex]; return value; } ",
"bVisible": false
},
{
"sWidth": "10%",
"sFilterType": "text",
"sName": "Kuerzel",
"bSearchable": true,
"bSortable": true,
"fnRender": "function(oObj) { var columnIndex=3; var value=oObj.aData[columnIndex]; return value; } ",
"bVisible": true
},
{
"sWidth": "20%",
"sFilterType": "text",
"sName": "Kurzbezeichnung",
"bSearchable": true,
"bSortable": true,
"fnRender": "function(oObj) { var columnIndex=4; var value=oObj.aData[columnIndex]; return value; } ",
"bVisible": true
},
{
"sWidth": "40%",
"sFilterType": "text",
"sName": "Langbezeichnung",
"bSearchable": true,
"bSortable": true,
"fnRender": "function(oObj) { var columnIndex=5; var value=oObj.aData[columnIndex]; return value; } ",
"bVisible": true
},
{
"sWidth": "10%",
"sFilterType": "date",
"sName": "GueltigVon",
"bSearchable": true,
"bSortable": true,
"fnRender": "function(oObj) { var columnIndex=6; var value=oObj.aData[columnIndex]; return value; } ",
"bVisible": true
},
{
"sWidth": "10%",
"sFilterType": "date",
"sName": "GueltigBis",
"bSearchable": true,
"bSortable": true,
"fnRender": "function(oObj) { var columnIndex=7; var value=oObj.aData[columnIndex]; return value; } ",
"bVisible": true
}
],
"bScrollInfinite": 'False',
"bStateSave": false,
"fnServerData": fnServerObjectToArray,
"bServerSide": true,
"sScrollY": 350,
"bJQueryUI": true,
"bPaginate": false,
"bProcessing": true
});
[/code]


http://debug.datatables.net/iqepep

Thank's in advance.

gregi

I tried to recalculate the width values by:
[code]
dialog.dialog({
close: function (event, ui) {
dialog.remove();
},
// Wenn man in einer deaktivierten Textbox Backspace drückt, dann bitte nicht eine Seite zurück blättern.
focus: function (event, ui) {
$('input.disabled').keydown(function (event) {
if (event.which == 8) {
event.preventDefault();
}
return false;
});
},
modal: true,
position: ['center', 'top'],
closeText: 'Schließen',
width: 1000,
minWidth: 800,
resizable: true,
buttons: buttonsToView,
resize: function (event, ui) {

$(registeredDataTables).each(function (index, item) {
item.dataTable().fnAdjustColumnSizing();
item.dataTable().fnDraw();
});
},
open: function (event, ui) {
$(registeredDataTables).each(function (index, item) {
item.dataTable().fnDraw();
});
}
});
[/code]

gregi

Hi there,

I found the Problem.
It was a min-width attribute in the style of the inputs from the tablefooter.

My fault. :(