If the pane is scrolled, the dark highlight shown when grabbing the splitter is misaligned like this:
Stackblitz repro can be found here
Hi Zornitsa,
perfect, thx a lot for your useful feedback!
Br, Michael
Hi Michael,
Thank you for the provided StackBlitz example.
I was indeed able to observe the described behavior of the Splitter pane's overlay leaving a white space when the pane is dragged after it was previously scrolled. On that note, this behavior is expected since it is caused by the default design of the overlay, which renders it absolutely positioned inside the pane, thus only covering the visible area of the pane.
In this line of thought, if the Splitter pane's content is wider than the pane itself, like in the shared StackBlitz example, scrolling horizontally reveals more content, but the overlay remains at the original width, causing the observed white space.
With the above being said, a possible approach to overcome this behavior and make the overlay take up the full width of the overflowed content inside the pane would be to set the overlay’s width to 100vw (100% of the viewport width). In that way, the overlay will stretch so that it always covers the scrolled content, even if the content is wider than the Splitter pane.
For demonstration of the suggested approach, I am linking below the modified StackBlitz example where the results can be observed:
I hope the provided information is helpful. Let me know if you have any further questions on the matter.
Regards,
Zornitsa
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.