I wanted a table to take up as much of the lower part of the screen as possible and it have a horizontal and vertical scroll bar always in view therefore I have a little script run upon browser resize (need it to run also upon page init) that basically sets a height on the table's parent div depending upon the available space in screen. It's great. Both scrollbars always show.
Now I need to add it into an Angular 4 project component. Not sure where to start. Also thinking on how to get some Debounce functionality added in (as well as getting it run upon init as well as resize as mentioned first).
//resize the table
$(window).resize(function () {
var target = $('.table-container-fixed-height'), tableoffset = target.offset().top, windoffset = $(window).height(), newHeight = (windoffset - (tableoffset + 5)), tableHeight = target.height();
target.css("max-height", newHeight);
console.log("---------------------");
console.log("table from top = " + tableoffset);
console.log("window height = " + windoffset);
console.log("new height cal for table = " + newHeight);
console.log("existing table height = " + tableHeight);
console.log("table height adjusted = " + newHeight);
});