RadWindow Missing Scrollbars on Resize in Chrome

3 posts, 0 answers
  1. vikas
    vikas avatar
    2 posts
    Member since:
    Jun 2016

    Posted 01 Aug Link to this post

    Hi - We have a Link Button on an aspx page and clicking on the 'OnClientClick' event, we call a javascript function that would open a popup window developed using RadWindow. The business requirement is to have this popup occupy a part of the screen so that the users can fill it up using the background screen for a few references - so the users should be able to scroll thru and resize this popup window. We display an existing aspx page within this popup window.

    Issue: In Chrome, when the pop-up window opens, scroll bars are visible and functional. However, on resizing the screen even a tiny bit, the scroll bars disappear. This makes it a lot harder for users to horizontally and vertically scroll thru the popup page to fill in details. This issue doesn't show up in IE 11 or Firefox. Any idea why Chrome behaves differently and are there any fixes?

    Code:

    1) Link Button

                            <asp:LinkButton ID="MyBtn" runat="server"  OnClientClick="openWin(); return false;" >
                                   <asp:Image ID="imgMyImage" runat="server" ImageUrl="~/images/someimage.png" Width="24px" Height="24px" />
                           </asp:LinkButton>

    2) openWin() javascript function:

        function openWin() {
            var oWnd = $find("<%=RadWindow1.ClientID%>");
            oWnd.show();
            });

    3) Radwindow html code:

    <telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" ShowContentDuringLoad="false" VisibleStatusbar="false"
            ReloadOnShow="true" runat="server" EnableShadow="true">
            <Windows>
    <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" ClientIDMode="Static" runat="server" Behaviors="Resize, Move, Close"
                        OnClientClose="OnClientClose"   NavigateUrl="~/MyPage.aspx"   MinHeight="500px" MinWidth="1000px" Title="Memo" style="z-index:10005;"  />
          </Windows>
    </telerik:RadWindowManager>

     

    Solutions Tried but didn't work:

    a) Removed RadWindowManager and Windows and used used the RadWindow

    b) Experimented with stylesheet settings to set overflow-x and y parameters for RadWindow.

    c) Experimented with Autosize related attributes for RadWindow.

     

    Browser versions:

    Chrome: 52.0.2743.82

    Firefox: 47.0.1

    IE 11:11.0.9600.18376

     

    Please help.

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 02 Aug Link to this post

    Hello,

    Chrome has a bug with iframes which is described in the following sticky thread: http://www.telerik.com/forums/radwindow-with-navigateurl-scrollbar-disappearing-in-chrome.

    Thus, you can apply the fix from the post and also use the OnClientResizeEnd event in addition to OnClientShow.

    I also advise that you remove the ClientIDMode=Static property because it is not supported.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. vikas
    vikas avatar
    2 posts
    Member since:
    Jun 2016

    Posted 02 Aug in reply to Marin Bratanov Link to this post

    Thanks Marvin. What worked were the attributes OnClientResize="clientShow" OnClientDragStart="clientShow" OnClientDragEnd="clientShow" along with the javascript function that you provided. However, the other 2 solutions ReloadOnShow="true" and OnClientShow="clientShow" didn't work.

    So the final Radwindow code is as below:

        <telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" ShowContentDuringLoad="false" VisibleStatusbar="false"
            ReloadOnShow="true" runat="server" EnableShadow="true">
            <Windows>
                <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" Behaviors="Resize, Move, Close"
                    NavigateUrl="~/MyPage.aspx" MinHeight="500px" MinWidth="1000px" Title="Memo" CssClass="RadWinCss"
                    OnClientResize="clientShow" OnClientDragStart="clientShow" OnClientDragEnd="clientShow">
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>

        function clientShow(sender, args) {
            if ($telerik.isChrome) {
                sender.get_contentFrame().style.width = "";
                setTimeout(function () {
                    sender.get_contentFrame().style.width = "100%";
                }, 0);
            }
        }

    Also, I am not very sure if this is an Iframe issue with Chrome. Because I found another workaround that uses plain Iframe for a div tag and this solution works for Chrome (as well as for IE and FF).

    Code:

        function openWin() {

           // var oWnd = $find("<%=RadWindow1.ClientID%>");
           //    oWnd.show();
            $('#MyDialog').html('<iframe border=0 width="100%" height ="100%" src="' + "MyPage.aspx" + '"> </iframe>');
            $("#MyDialog").dialog({
                title: "Memo",
                modal: true,
                autoOpen: true,
                height: "500",
                width: "1000",
                resizable: true,
                position: ['right-10', 'top+60'],
                closeOnEscape: false,
                dialogClass: "alert"
            });

        }

      <div id="MyDialog" style="z-index:10005;">
            </div>

Back to Top