search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Scheduler dynamically change the height config and update visually

Asked by Anonymous
1 day ago.

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.

Answer posted by Dan Letecky [DayPilot]
1 day ago.

Have you tried using heightSpec: "Max100Pct"? This option is designed exactly for this use case.

It will automatically stretch the height as needed, up to 100% of the parent div - then a vertical scrollbar will be added.

You just need to set the height of the parent element to 95vh.

Comment posted by Anonymous
1 day ago.

That’s the thing, we don’t want to force the height to be 95vh all the time. It’s possible the 4 rows have barely any data in it and we want it to take up as little space as possible. I’ve tried to play with the height specs and “Max” is, as far as I can tell, the only thing that’s really doing what we want here.

Now this resizing part is something I just thought of and it would be nice if it worked, in reality the odds of people changing size/screen constantly is unlikely to happen so it’s also not problematic if it doesn’t work. I do find it strange that it does seem to do something, but not 100% as I expect considering the height is set dynamically when opening the panel the first time as well. And that all works exactly as expected.

The “small” panel added as an attachment to show what I mean.

Comment posted by Dan Letecky [DayPilot]
1 day ago.

I understand. Let me clarify the mechanism a bit:

If you change the config, the Scheduler will automatically update itself. However, the update is delayed a bit (it happens during the next Angular change detection cycle). Changing the config and calling show() will in fact result in show() and an update (in this order).

Instead of setting the height through the config, it might be better to call setHeight() using the direct API. This way you won’t mix two updates.

Comment posted by Anonymous
1 day ago.

The setHeight function does it correctly!

The change of the “heightSpec” to fixed does make it behave slightly different, but not an issue in this case.

New Reply
This reply is
Attachments:
or drop files here
Your name (optional):