I have an angular component which is a “panel” that opens up from the bottom of the page, this displays a scheduler with the necessary data.
Currently it’s configured using the heightSpec “Max” as this works for what we need. When there’s not a lot of data in the scheduler the panel should stay as small as it displaying all the data. When there’s a lot more data in the scheduler it increases in height (the max height using CSS is set to 95vh for the panel itself) until the max set height and then adds a vertical scrollbar if necessary.
This works great in itself however I was trying to update the scheduler’s height if a window resize was detected where the height changes but it doesnt seem to be working as I expect it, maybe it simply doesn’t work like that (unsure).
The code I have written for this:
// windowHeight is a parameter based on the window resize event
const panelHeight = windowHeight * 0.95; // this.panelMaxHeightPercentage;
const calculatedSchedulerHeight = panelHeight / 1.227; // this.schedulerToPanelRatio;
this.config.height = calculatedSchedulerHeight - 20; // 20 takes care of the "header"
if (this.scheduler) {
this.scheduler.control.show();
}
The way I test it right now is I have a big monitor and a laptop screen, changing from one screen to another detects the resize event but the scheduler doesn’t seem to update instantly in it’s height.
However I have noticed when I open the scheduler on the big screen it’s as large as it should be, I move the window to the laptop screen, it stays the same height but now there’s rows that are hidden from my view. Then if I change it back to the big screen the scheduler height is showing smaller than the original, so perhaps something is working? I’ll attach images of that to this message, the black boxes are to censor the data.