Opening a window with the service causes the content to scroll to where the placeholder div is located

1 Answer 292 Views
Window
Noah
Top achievements
Rank 2
Iron
Iron
Iron
Noah asked on 20 Mar 2023, 06:35 PM

if I have content like this...

<div>
  {{content}}
</div>
<div kendoWindowContainer></div>

if the content on the page is large enough, then when I create the window with the angular service, it makes the page scroll down to the bottom where the windowContainer div is located.  Even though the service is explicitly setting the window position to be at the top of the page.

 

So effectively, when the user clicks the button to trigger showing the window, suddenly the page scrolls to the bottom and they can no longer see the section of the content they were looking at NOR the window since it has scrolled up as well.

How do I prevent the page from scrolling to where the container is located when I'm opening a window with the angular service?

1 Answer, 1 is accepted

Sort by
0
Accepted
Georgi
Telerik team
answered on 22 Mar 2023, 12:13 PM

Hi Noah, 

Thank you very much for the details provided.

Indeed, this unexpected behavior of the Window is an issue that has previously been reported to us and that we are aware of. 

In our public GitHub repository, we have an open issue for this bug. What I would suggest is to subscribe to this issue in order to track how the resolution process goes: 

https://github.com/telerik/kendo-angular/issues/2512

What I could suggest as a workaround until the issue is resolved would be for the developer to disable the scroll and re-enable it when the Window is opened:

onOpen(){
    ... 
    let x = window.scrollX;
    let y = window.scrollY;

 window.onscroll = () => {
      window.scrollTo(x, y);
    };

    setTimeout(() => {
      window.onscroll = () => {};
    });
}

In these lines of words, I would like to apologize for any inconvenience that this undesired behavior may cause.

Let me know if I could further assist you with this case.

Regards,

Georgi

Progress Telerik

Noah
Top achievements
Rank 2
Iron
Iron
Iron
commented on 29 Mar 2023, 01:28 PM

thanks.  For my specific purposes I was able to override the css on the created window itself and have it be fixed so it didn't move around with the content and the content didn't unexpectedly scroll when it was opened.
Jason
Top achievements
Rank 1
commented on 08 Oct 2024, 12:12 PM

Since the devs don't seem to care to fix the issue, here's how I resolved it. Kind of hacky,  but it seemed to work.

 


  constructor(private renderer: Renderer2) { }

  ngAfterViewInit(): void {

    // force a manual scroll to top
    setTimeout(() => {
      const element = this.renderer.selectRootElement(".k-dialog-content", true) as HTMLDivElement;
      element.scrollTop = 0;
    });

  }

Georgi
Telerik team
commented on 11 Oct 2024, 06:58 AM

Hi Jason,

Thank you very much for your feedback and the suggested workaround.

I would like to assure you that our team is constantly dedicating efforts towards improving the customer experience and resolving the bug reports in our backlog. 

To do this, we internally calculate a priority for each reported bug and make sure to first resolve the ones with the highest priority and impact on the customer experience. 

I hope this sheds some light on the matter. Please, let me know if I can further assist you with this case.

Regards,
Georgi
Progress Telerik

Tags
Window
Asked by
Noah
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Georgi
Telerik team
Share this question
or