Datatable causes container to float when page is rendered but fixes itself with screen re-sizing !

charis58

I've been battling with this problem for a while now. The width of my jQuery DataTable is only displayed correctly after I resize the screen. Watch this screencast to see what happens:

http://screencast.com/t/QY2ZgZp4By

Here's the scenario:

Using ASP.NET I import data from CSV file and dynamically build a table. The file has a variable number of columns - so it can be any number of columns.

After I produce the table I call the DataTable script to format the table as show below:

Private Sub CreateInputDataTable()

Dim input As BA.Input = CurrentInput
Dim inputLines As BA.InputLines = input.Lines
Dim columnHeaders As BA.InputColumnHeaders = input.ColumnHeaders
'Dim loadDefItems As BA.InputLoadDefinitionItems = CurrentInputLoadDefinition.DefinitionItems

phInputLoadData.Controls.Clear()

Dim tblRows As Integer = inputLines.Count
Dim tblCols As Integer = 19 ' Hard coded col number to create sample
' Create a Table and set its properties
Dim tbl As Table = New Table()
' Add the table to the placeholder control

tbl.ID = "tblInputLoad"
tbl.Attributes.Add("runat", "server")
tbl.Width = Unit.Percentage(100)

phInputLoadData.Controls.Add(tbl)

'Add dropdown boxes to row headers
Dim thr As TableHeaderRow = New TableHeaderRow()
thr.TableSection = TableRowSection.TableHeader

For i As Integer = 0 To tblCols - 1
Dim cboColName As DropDownList = New DropDownList()

Dim thc As TableHeaderCell = New TableHeaderCell()
thc.Width = Unit.Pixel(80)

thc.CssClass = "input-def-col-header"

With cboColName
.ID = "cboColName_" + i.ToString()
.Width = Unit.Pixel(80)

AddHandler cboColName.PreRender, AddressOf cboColName_PreRender

End With

'Add control to the table cell
thc.Controls.Add(cboColName)

'Add table cell to the TableRow
thr.Cells.Add(thc)
Next

tbl.Rows.Add(thr)

' Add column headers
thr = New TableHeaderRow()
thr.TableSection = TableRowSection.TableHeader

For i As Integer = 0 To tblCols - 1
Dim thc As TableHeaderCell = New TableHeaderCell()
thc.Width = Unit.Pixel(80)
Dim txtBox As TextBox = New TextBox()

txtBox.CssClass = "input-file-col-header"
txtBox.Text = columnHeaders(i).ColumnHeaderName
txtBox.Width = Unit.Pixel(80)
' Add the control to the TableCell
thc.Controls.Add(txtBox)
' Add the TableCell to the TableRow
thr.Cells.Add(thc)
Next

tbl.Rows.Add(thr)

Dim tr As TableRow = New TableRow
tr.TableSection = TableRowSection.TableBody

' Now iterate through input lines and add controls
For i As Integer = 0 To tblRows - 1
tr = New TableRow()

For j As Integer = 0 To tblCols - 1
Dim tc As TableCell = New TableCell()
tc.Width = Unit.Pixel(80)
Dim txtBox As TextBox = New TextBox()
txtBox.Width = Unit.Pixel(80)
txtBox.Text = inputLines(i).Items(j).Value

If inputLines(i).Items(j).ItemType <> BudgetAllocations.InputDefinitionColumnType.Data Then
txtBox.CssClass = "input-file-frozen-left-cols"
End If

' Add the control to the TableCell
tc.Controls.Add(txtBox)
' Add the TableCell to the TableRow
tr.Cells.Add(tc)
Next j

' Add the TableRow to the Table
tbl.Rows.Add(tr)
Next i

ClientScript.RegisterClientScriptBlock(Me.GetType(), "FormatInputTable", _
"$(document).ready(function() {FormatInputTable();});", True)

End Sub

The table is inserted into a ASP.NET placeholder as show below:





And here is the script to format the table:

function FormatInputTable() {
var oTable = $('#ctl00_MainContent_tblInputLoad').dataTable({
"bJQueryUI": false,
"sScrollY": "300px",
"sScrollX": "100%",
"sScrollXInner": "50%",
"bScrollCollapse": true,
"bPaginate": false,
"bRetrieve": false,
"bFilter": false,
"bAutoWidth": false
});
new FixedColumns(oTable, {
"iLeftColumns": 2,
"iLeftWidth": 170,
"bAutoWidth": false
});
};

My problem: when the HTML page is rendered my entire right-hand-side container floats to the left due to the length of the table. In this demo I set the number of columns to 19. However, when I minimize the screen everything is displayed correctly the way it is meant to be.

My question: what do I do to make sure the reformatted datatable is shown correctly, instead of floating left? Any help would be greatly appreciated.

charis58

The problem was solved by adding overflow:hidden to container as shown below: