페이지가 렌더링 될 때 jQuery DataTable의 크기가 올바르게 조정되지 않습니다.

Question

지금 당분간이 문제로 다투어 왔습니다. jQuery DataTable의 너비는 화면의 크기를 조정 한 후에 만 ​​올바르게 표시됩니다. 무슨 일이 일어 나는지이 스크린 캐스트를 시청 :

내가 CSV 파일에서 데이터를 가져 와서 동적으로 테이블을 구축 ASP.NET을 사용 :

http://screencast.com/t/QY2ZgZp4By

여기에 시나리오입니다. 이 파일에는 가변 개수의 열이 있습니다. 따라서 열 수는 제한이 없습니다.

<div id="div-input-load-cont" style="float: left; width: 70%; margin-top: 5px; height: 350px"> 
    <asp:PlaceHolder ID="phInputLoadData" runat="server" EnableViewState="False"></asp:PlaceHolder> 
    </div> 

: 테이블은 아래 표와 같이 ASP.NET 자리에 삽입

 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 

:

나는 아래 표와 같은 테이블을 포맷 할 DataTable의 스크립트를 테이블에 전화 I 생산 후 다음은 테이블 형식을 지정하는 스크립트입니다.

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 
    }); 
}; 

내 문제 : HTML 페이지 e가 렌더링되면 테이블의 폭 때문에 내 오른쪽 전체 컨테이너가 왼쪽으로 떠있게됩니다. 이 데모에서는 열 수를 19로 설정했습니다. 그러나 화면을 최소화하면 모든 것이 올바르게 표시됩니다.

내 질문 : 포맷 된 데이터 테이블이 올바르게 표시되는지, 부동 왼쪽이 아닌지 확인하려면 어떻게해야합니까? 어떤 도움이라도 대단히 감사하겠습니다.

Answer 1

에서 float:left 취소해야 추가 오버 플로우 :

  <div id="div-input-load-cont" style="float: left; width: 100%; overflow: hidden; margin-top: 5px; 
      height: 350px"> 
      <asp:PlaceHolder ID="phInputLoadData" runat="server" EnableViewState="False"> 
      </asp:PlaceHolder> 
     </div> 

Answer 2

당신이 스타일