Hi.
I have a question regarding the Splitter component working together with the Scheduler. I have created an example here:
https://stackblitz.com/edit/react-rfnb52?file=app%2Fmain.tsx
What I want to achieve is autosizing the scheduler depending on the splitter pane. So when I close the lower pane using the button above, the scheduler should resize filling the upper pane as much as possible and of course re-opening the lower pane should also resize the scheduler too.
Also: As you can see in my example, the Scheduler doesn't show completely when I scroll down. I had to hide the scroll bar in the outer div to not have 2 bars.
Any help would be appreciated.
Thanks,
Greetings,
Bernd
Rank 5
Bronze
Bronze
Bronze
1 Answer, 1 is accepted
Hi Bernd,
The behavior that you are observing (with the missing part of the scrollbar and the non expanding content of the pane) is due to the fact that you have DIV elements with explicit height and overflow set to "hidden". Changing the style for those DIV elements resolves the issue:
Note that setting the height of the DIV elements to "100%" expands the scheduler as well, when the lower pane is collapsed.
Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 5
Bronze
Bronze
Bronze
Hi.
First of all, thanks for your answer. While this works, the issue for me is that it shows 2 scrollbars, for the scheduler and for the div around it. I was looking for a solution to get rid of one of them, preferrably the one of the outer div.
Actually in my real app I don't even have divs around the scheduler but I thought that would maybe make it easier. Don't know.
Any idea?
Greetings,
Bernd
One option would be to set the height of the Scheduler to "100%", so that it does not render scrollbar for its content:
As for a solution where the Scheduler changes its height dynamically, this will be difficult due to the fact that the Splitter calculates its pane height based on its content, then the TabStripContent expands based on its content and finally, the Scheduler has enabled scrollbar by default. Additionally, changing the height of the Scheduler will force it to re-mount, which will have huge performance impact, so I would go with a solution that can use CSS configuration or use simplified component structure.