I am trying to resize the jqx scheduler as the user resizes the page or browser window. I tried using “widht=”100%”” and “Height=”100%”” and resizing the outer container accordingly but it didn’t work properly as the scheduler wants to be in the view always and when I click on scheduler in moves up overlapping some elements.
So I am trying to do this now
@HostListener('window:resize', ['$event'])
onResize(event) {
const height = document.body.offsetHeight;
const width = document.body.offsetWidth;
this.scheduler.height(height - 208);
this.scheduler.width(width - 270);
}
This works great but I have one problem the scroll bar at the edge of the scheduler goes to the correct width but the rest of the scheduler remains on the left side. I have demonstrated it in this example
https://stackblitz.com/edit/github-uxcs1r?file=src%2Fapp%2Fapp.component.ts
When you open the stackblitz result in a new window and try to resize it or click on the Test button it just doesn’t resize properly.