RadWindow Missing Scrollbars on Resize in Chrome

[vikas]

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.

[Marin Bratanov]

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

[vikas]

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>

[Burak]

I can solve this issue by adding OnClientPageLoad="clientShow" attribute.

 

<telerik:RadWindow   ID="ctlMesajWindow" runat="server" RenderMode="Auto" Skin="Vista" EnableShadow="true" Modal="true" CenterIfModal="true"  ShowContentDuringLoad="false" Width="600px" Height="500px"  VisibleStatusbar="false" OnClientPageLoad="clientShow">
                             
                                        
                                </telerik:RadWindow>