How to adjust sScrollY with respect to parent container

sriram139

Hi Allan,
I am very happy to tell you that I have shown a POC using jquery and datatable which was appreciated by all my team members. :) I wanted to try out more options to develop more complex UIs.

I opted to chose JQuery UI Layout plugin for defining the layouts which are flexible to resize and supports multiple layouts by switching. Here my concern is that -
I am placing datatable with xscroll and yscroll inside one of the panels inside the layout whose height may vary based on selection of layout by the user who can switch dynamically. So, I want to resize the table height so that it fits to what ever panel it is rendered in without getting scroll bars at layout panel level. If I remove sScrollY, it is going out of viewport resulting in vertical scroll bar at parent layout panel. Do we have any option to best fit the datatable w.r.t. the height of its parent container?
Kindly suggest.

-Sriram.

allan

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

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

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

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

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.