When utilizing the Angular approach to apply CSS, I noticed that changes are not applied when resizing the window. The canvas height adjusts correctly upon resize, but the table height only updates when we scroll the window. Is there a way to set the canvas height immediately after resizing the window?
Any suggestions on how to address this issue would be greatly appreciated.
angular.element(document).ready(function ($timeout) {
function update_table_height(canvasHeight) {
angular.element('.scrollableContainer').css("height", canvasHeight + 5 + "px");
}
angular.element(window).on("load resize scroll", function() {
var canvasHeight = angular.element('#chartCanvas').height();
update_table_height(canvasHeight);
});
$timeout(function(){
var canvasHeight = angular.element('#chartCanvas').height();
update_table_height(canvasHeight);
});
});