I need to fit scheduler in adaptive design. To achieve adaptive design of my app I need to fit scheduler inside flex container. Now Scheduler stretching and shrinking only on x-axis but no y. any attempt to set height as precent is failed.
I saw example and demo and all examples are setting height as fix value in pixels, which is not acceptable for me.
is this even possible?
Hi @igor.vikram,
You can use media queries to set different height depending on media type, device width, orientation, etc - Using media queries - CSS: Cascading Style Sheets | MDN
Example:
@media (max-width: 768px) {
.rz-scheduler {
height: 400px;
}
}
@media (max-width: 1200px) {
.rz-scheduler {
height: 700px;
}
}
This is adaptive solution related screen size but not content. As i said my goal is Fit to container and stretching and shrinking in both axis depend of orientation/screen size/content/layout etc.
I solved this problem temporary by manually calculating div`s dimensions with js and adjusting scheduler's dimensions manually, but this is not reliable solution.
Not sure why setting the height in percentage is not working on your side. Here is a video from the demos with the Scheduler wrapped inside a <div... and set to 100% height. Resizing the div resizes the Scheduler as well.
How you set the sizing of the div wrapper (parent element) is up to you and the layout approach you use - be it a flex, or a grid layout, or absolute positioning, or manually calculating it. In any case it should not be in the scope of the Scheduler component itself.
Is this demo available on github?
Used this demo in the video and wrapped inside a div:
<div style="height: 500px">
<RadzenScheduler style="height: 100%">
...
</RadzenScheduler>
</div>
You can paste this code in the Edit Source tab in the online demos.
You right. When I changed demo as said i scheduler is adaptive and responsive as well. I think my problem is understanding how css in general rather than woks but not radzen scheduler since my layout looks like this :
And i dont know how to achieve behaviour like this.
Oh, when I understood my problem, I found a solution.
this style on page container do the job :
display: flex; flex-direction: column;
Thank you very much for provided example and hints.
Hi @yordanov Is there any possible to resize slots height instead of rely on scroll? i want slots resize alongside with scheduler.
