Datatables height with Jquery UI Layout

PeteYorn

Hello

First of all, let me state that I'm a Datatables beginner so I'm asking for your help to, maybe, a simple problem
I'm trying to fit table into a UI Layout div. This as proven to be a challenge since the table is able to fit in width but not on height.
Meanwhile let me say that I'm doing a refresh to the table "real time" and work very well with paging but not with scroll.

[code]


Layout


body { font: normal 8pt Helvetica, Arial; }
#example tbody { height: 100%; }


@import "media/css/demo_table_jui.css";
@import "media/themes/smoothness/jquery-ui-1.8.4.custom.css";



*{
font-family: arial;
font-size: 8pt;
}








$(document).ready(function () {
$('body').layout({

closable: true // pane can open & close
, resizable: true // when open, pane can be resized
, slidable: true // when closed, pane can 'slide' open over other panes - closes on mouse-out
, livePaneResizing: true

// some resizing/toggling settings
, north__slidable: false // OVERRIDE the pane-default of 'slidable=true'
, north__togglerLength_closed: '100%' // toggle-button is full-width of resizer-bar
, north__spacing_closed: 20 // big resizer-bar when open (zero height)
, south__slidable: false // OVERRIDE the pane-default of 'slidable=true'
, south__togglerLength_closed: '100%' // toggle-button is full-width of resizer-bar
, south__spacing_closed: 20 // big resizer-bar when open (zero height)

, center__minWidth: 100
, south__size: 195

});
});

var oTable;
$(document).ready(function() {
oTable = $('#example').dataTable( {
"bJQueryUI": true,
"bProcessing": false,
"iDisplayLength": 5,
"sPaginationType": "full_numbers",
"sAjaxSource": "examplejson.php",
"aoColumns": [
{ "mDataProp": "Field1", "sWidth": "10%" },
{ "mDataProp": "Field2", "sWidth": "10%" },
{ "mDataProp": "Field3", "sWidth": "50%" },
{ "mDataProp": "Field4", "sWidth": "10%" },
{ "mDataProp": "Field5", "sWidth": "10%" },
{ "mDataProp": "Field6", "sWidth": "10%" }
]
} );
updateTable();
} );

function updateTable() {
// Update the table using the fnReloadAjax call method
timer = setInterval(function() {
oTable.fnReloadAjax(null, null,true);
//oTable.fnDisplayStart(oSettings, iStart, true);
}, 1000);
}














Field1
Field2
Field3
Field4
Field5
Field6









[/code]

What I'm trying to achieve is, regardless of having 2 or 10 rows the table adapts to 100% of the height.
If you could please take the time to send me on the right direction, it would be most appreciated.

Best regards,
Pete Yorn