Modal window displays out of view in Chrome only

7 posts, 0 answers
  1. Charlie
    Charlie avatar
    6 posts
    Member since:
    Mar 2011

    Posted 29 Jan 2018 Link to this post

    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>

     

     

  2.
  3. Rumen
    Admin
    Rumen avatar
    13804 posts

    Posted 31 Jan 2018 Link to this post

    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.
  5. Charlie
    Charlie avatar
    6 posts
    Member since:
    Mar 2011

    Posted 20 Feb 2018 Link to this post

    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>

     

  7. Charlie
    Charlie avatar
    6 posts
    Member since:
    Mar 2011

    Posted 23 Feb 2018 in reply to Rumen Link to this post

    Have you been able to look at my latest post?
  8.
  9. Rumen
    Admin
    Rumen avatar
    13804 posts

    Posted 25 Feb 2018 Link to this post

    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.
  11. Charlie
    Charlie avatar
    6 posts
    Member since:
    Mar 2011

    Posted 22 Mar 2018 in reply to Rumen Link to this post

    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

  13. Rumen
    Admin
    Rumen avatar
    13804 posts

    Posted 27 Mar 2018 Link to this post

    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.
Back to Top