This is a migrated thread and some comments may be shown as answers.

Modal window displays out of view in Chrome only

6 Answers 364 Views
Window
This is a migrated thread and some comments may be shown as answers.
Charlie
Top achievements
Rank 1
Charlie asked on 29 Jan 2018, 08:49 PM

My RadWindow works fine in IE11 and Firefox displaying in the center of the page.  However, with Chrome, the window will display out of view displaying farther down the page.  I know that this was working at some point fine.  I am using version 2017.3.913.45

Does anyone know about a change in Chrome that could have caused this?  

    function ShowPricing(LineNumber) {
        var oWnd = $find("<%=rwndPricing.ClientID%>");
        oWnd.setUrl("Popups/GridPricing.aspx?<%=UserSession.SessionQueryVar %>&LineNumber=" + LineNumber);
        oWnd.show();
        return false;
    }

<telerik:RadWindow ID="rwndPricing" runat="server" Behaviors="Close,Move,Resize"
    AutoSize="true" Modal="true" VisibleStatusbar="false" ShowContentDuringLoad="false">
</telerik:RadWindow>

 

 

6 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 31 Jan 2018, 12:48 PM
Hello Charlie,

I tried to reproduce the problem in the latest Chrome but without success. For your convenience I have attached my test project. Can you please modify it so that it starts to demo the issue and send it back for examination?

Can you please upgrade to version 2018.1.117 (R1 2018) where this browser issue may be fixed? There is a sticky note on this problem: Wrong placement of RadContextMenu and RadTooltip in Chrome 61.

Another reason for the problem is discussed in this KB article: Incorrect positioning of controls.
 

Best regards,
Rumen
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Charlie
Top achievements
Rank 1
answered on 20 Feb 2018, 09:54 PM

The sample code that you sent worked, but it is a very simple example.  I found out that the issue only happens when you have scrolled down the page.  I changed your code to make the page have enough data to scroll and the issue does occur.  This does seem very similar to the issue that was fixed in 2018.1.117.  

"Wrong placement (position) of RadToolTip, RadContextMenu, RadCalendar popup in Chrome 61+, Edge and Opera"

I've attached my modified code below:

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" />
        <script>
            function ShowPricing() {
                var oWnd = $find("<%=rwndPricing.ClientID%>");
             oWnd.setUrl("http://www.bing.com");
             oWnd.show();
             return false;
         }
        </script>
        <button onclick="ShowPricing();return false;">click</button>
        <br />text to make scroll bar appear <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br />text to make scroll bar appear <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br />text to make scroll bar appear <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br />text to make scroll bar appear <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <button onclick="ShowPricing();return false;">click</button>
        <br />text to make scroll bar appear <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <telerik:RadWindow ID="rwndPricing" runat="server" Behaviors="Close,Move"
            AutoSize="true" Modal="true" VisibleStatusbar="false" ShowContentDuringLoad="false">
        </telerik:RadWindow>
    </form>
</body>

 

0
Charlie
Top achievements
Rank 1
answered on 23 Feb 2018, 04:00 PM
Have you been able to look at my latest post?
0
Rumen
Telerik team
answered on 25 Feb 2018, 10:48 PM
Hi Charlie,

I was able to reproduce the problem with your help!

I updated your Telerik points and will further research the issue.

As a workaround, you can store the scroll position before the setUrl method execution and restoring it shortly after showing the modal popup:

<script>
    function ShowPricing() {
        var body = document.body;
        var docElem = document.documentElement;
        var bodyScrollTop = 0;
        var bodyScrollLeft = 0;
        var docElemScrollTop = 0;
        var docElemScrollLeft = 0;
 
        bodyScrollTop = body.scrollTop;
        bodyScrollLeft = body.scrollLeft;
        docElemScrollTop = docElem.scrollTop;
        docElemScrollLeft = docElem.scrollLeft;
 
        var oWnd = $find("<%=rwndPricing.ClientID%>");
        oWnd.setUrl("https://www.bing.com");
        oWnd.show();
         
 
        setTimeout(function() {
            body.scrollTop = bodyScrollTop;
            body.scrollLeft = bodyScrollLeft;
            docElem.scrollTop = docElemScrollTop;
            docElem.scrollLeft = docElemScrollLeft;
        }, 1200);
     return false;
 }
</script>
 
<button onclick="ShowPricing();return false;">click</button>


Best regards,
Rumen
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Charlie
Top achievements
Rank 1
answered on 22 Mar 2018, 03:41 PM

Hi Rumen -- that worked in the sample app okay, but not in my actual application.  I'm wondering if you have found anything yet on this? 

Also, I've noticed that if you click on the title bar of the RadWindow it will make the jump down out of view -- this is in my application only and not the sample app.  

Another thing is that if the RadWindow AutoSize is set to false, the window will display properly in the viewing area.  However, clicking on the title bar will still make it jump down out of view.

Thanks,

  Charlie

0
Rumen
Telerik team
answered on 27 Mar 2018, 02:44 PM
Hi Charlie,

So far I haven't be able to find a solution, but I will be grateful if you can isolate the problem in a runnable project or an aspx page which demonstrates it. This way I will have your scenario and be able to debug it and test any potential fixes/workarounds in advance.

You can provide the project in a new support ticket which you can open from your Telerik.com account.

Thank you for your assistance and understanding.

Best regards,
Rumen
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Window
Asked by
Charlie
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Charlie
Top achievements
Rank 1
Share this question
or