Replies

• allan Posts: 63,538Questions: 1Answers: 10,476 Site admin

  October 2010

  I guess you are initialising the table after the panel is being displayed? If so. you can just get the height of the panel ($().height()) and then subtract a suitable amount for the element that DataTables adds, and use that for sScrollY. If you want to do it after DataTables has initialised, just grab the div.dataTables_scrollBody element and resize that.
  
  Allan
• sriram139 Posts: 15Questions: 0Answers: 0

  October 2010

  Thank you very much, Allan.
  Yes, I am initializing datatable after panel is displayed, so I tried below code to adjust the height:
  
  myTable.fnSettings().oScroll.sY = $('#inner_west_panel').height()-125;
  
  It worked fine, but you can understand that the calculated value to subtract is based on current content height that datatable adds, which depends on column header size, font size, zoom level of browser which varies once I apply any customization to the columns or user changes the zoom/font size on browser.
  
  Sorry if below concern doesnt make any sense... that is,
  Is there a way to know the additional overflowed size (content out of viewport, or size of hidden content that can be scrolled to bring on viewport) for a div with vertical scroll bar, so that I can subtract it from the panel height as done above?
  
  I tried googling about this, but no luck, only hope being an expert's suggestion made me put this query to you. :)
  
  
  Regards,
  Sriram
• allan Posts: 63,538Questions: 1Answers: 10,476 Site admin

  October 2010

  Hi Sriram,
  
  Yup understood - basically rather than making the subtracted height static make it dynamic. So one way of doing that would be to initialise the DataTable with an sScrollY height of 1px (1 rather than 0 to make sure that the browser does the needed width calculations), and then take the height of the div.dataTables_wrapper element which surrounds the table, and subtract that from the height of the container - you are left with the height available for scrolling.
  
  Then apply that height to the div.dataTables_scrollBody and hopefully that will do it :-)
  
  Allan
• sriram139 Posts: 15Questions: 0Answers: 0

  October 2010 edited October 2010

  Awesome Allan. It really helped me a lot to fix this. Thank you very much. I held this issue for some other task completion. I just got relief by solving this. :)
• sriram139 Posts: 15Questions: 0Answers: 0

  November 2010

  Hi Allan,
  While the above trick works fine, it is having issues in specific cases for calculating correct height.
  For example, when we set the height to 1 initially and get the height of the datatable wrapper, it gives the height but at that point of time if the coulmn heading is spaning across two lines, the height of the table will be a bit more and once we render the data and adjust the table height, then based on the width of the data rows, the column heading resizes to single row and the calculated table height based on this becomes lesser to what it should be exactly. To put it in example:
  - I set initial sScrollY to 1, also bautowidth to true and bscrollcollapse is false
  - while getting the height of datatable using $("#myList_wrapper").height(), it gets the height as say 100 (it includes height of table header which may span in two rows if the headers are long. Let panel height be 300 and myTable.fnSettings().oScroll.sY be 50. So calculated height becomes (panel_height-table_height)+myTable.fnSettings().oScroll.sY, which will be 250.
  - once we render the complete table data, due to the data, the column headers may adjust to single row, there by increasing the space for table by single row height, say 10, so the table adjusts itself to render with height 250 as calculated leaving out the increased space which will remain blank below the table footer.
  
  Please suggest how to adjust the height, in this case where the column headers lengths are varying due to bAutoWidth=true.