RadWindow with NavigateUrl Scrollbar Disappearing in Chrome

Thread is closed for posting
1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 04 Jul Link to this post

    Problem: The scrollbars of RadWindow with NavigateUrl is lost in Chrome browser when the visibility of the window is toggled.

    Details: The issue stems from a bug in Chrome browser ( Iframe scrollbars disappear when toggling visibility of the iframe element) that is related to scrollbars disappearing of an iframe element when its display attribute is set to "none" and then "". The issue can be seen in this video (http://screencast.com/t/KoBPnfk4ZcMK) and can be reproduced with no Telerik UI for ASP.NET AJAX controls:

    HtmlPage.html:
            <script>
                function showIframe() {
                    document.getElementById("iframe1").style.display = "";
                }
                function hideIframe() {
                    document.getElementById("iframe1").style.display = "none";
                }
            </script>
            <input type="button" name="name" value="Show Iframe" onclick="showIframe(); return false;" />
            <input type="button" name="name" value="Hide Iframe" onclick="hideIframe(); return false;" />
            <iframe id="iframe1" src="HtmlPage2.html"></iframe>
    HtmlPage2.html:
    <body>
        <div style="border: 1px solid green; height: 1200px;">
        </div>
    </body>


    Solution
    : You can choose either approach:

    • Set the ReloadOnShow property of the RadWindow to true.
    • Or use the following workaround to reset the iframe element dimensions:
    function clientShow(sender, args) {
        if ($telerik.isChrome) {
            sender.get_contentFrame().style.width = "";
            setTimeout(function () {
                sender.get_contentFrame().style.width = "100%";
            }, 0);
        }
    }
    <telerik:RadWindow ID="RadWindow1" runat="server" NavigateUrl="HtmlPage2.html" OnClientShow="clientShow"></telerik:RadWindow>

     

Back to Top