0

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

    });
Matt
  • 1
  • 3
  • You are trying to solve a css problem with javascript, maybe try to rethink your solution. – ibenjelloun Apr 12 '18 at 11:27
  • Any tips on how to do this in css give the requirement of having both horizontal and vertical scrollbars always visible on the browser window as the table is huge in both of these directions and that the table to always take up as much space a possible (minus about 200px of hero content above it)? (no double browser scrollbars too) – Matt Apr 12 '18 at 12:15
  • Could you add a stackblitz to your question to expose the current state of your code ? – ibenjelloun Apr 12 '18 at 12:34
  • Here is a code Pen where it is working exactly how I want. What would be the best way to add this to an Angular project? Inside the Controller OnInit ? Or is there a better way to do it using Angular's functions? https://codepen.io/mbot138/pen/mxXOZg?editors=0010 – Matt May 02 '18 at 16:12

0 Answers0