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

Rad window shows no scrollbars in chrome

5 Answers 220 Views
Window
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 21 Jun 2016, 02:42 AM

Hello Telerik!

I need your help urgently. I am stuck in this problem since 2 days. I have a Rad Window which is opened in javascript. This window is opened as maximized using oWnd.maximize();

This window's content .aspx page is having a RadTabStrip with RadMultiPageView. The width of RadMultiPage is set in Pixels.

 When I restore the window and resize it , It should be showing the scroll bars as now the content of the window is beyond the size of the window. And this is what happens in FF and IE.. which is correct but I don't see any scrolls in the Chrome. 

 

I have spent a lot of time in this issue and still not able to figure it out... Kindly help me with this problem... or is this a known Chrome issue as it works fine in FF and IE.

 

Regards,

Nick.

 

5 Answers, 1 is accepted

Sort by
0
Nick
Top achievements
Rank 1
answered on 21 Jun 2016, 02:22 PM

Sorry...forgot to mention that scrollbars are visible while I am resizing (manually) the radwindow but they disappear as soon as I leave the mouse button...

This is urgent... please ...

Thanks!..

0
Marin Bratanov
Telerik team
answered on 23 Jun 2016, 08:07 AM

Hi Nick,

This is not a known issue with RadWindow and it sounds like something is going wrong with the CSS rules in the content page for smaller viewports. RadWindow is just an iframe from the point of view of the content page: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/common-issues#general-troubleshooting.

What I can suggest you look into at this point is the following:

  • ensure you are using the latest version of the suite (R2 2016 SP1 at the time of writing)
  • try the Lightweight Render Mode: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/mobile-support/render-modes.
  • ensure the page markup is valid
  • make sure there are no script errors
  • ensure Chrome is not running in mobile browser emulation mode, because in this case scrollbars are not shown unless you are scrolling (this is a mobile device behavior)

Also, here is an example that works properly on my end:

<!DOCTYPE html>
 
    <head runat="server">
        <title></title>
        <style>
            .fillContainer
            {
                width: 100%;
                height: 300px;
                overflow: auto;
            }
            .large
            {
                width: 600px;
                height: 600px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="Scriptmanager1" runat="server" />
            <telerik:RadTabStrip runat="server" ID="rts1" MultiPageID="rmp1" Width="200px">
                <Tabs>
                    <telerik:RadTab Text="first" Selected="true"></telerik:RadTab>
                    <telerik:RadTab Text="second"></telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage runat="server" ID="rmp1" Width="200px">
                <telerik:RadPageView ID="RadPageView1" runat="server" Width="200px" Selected="true">
                    <div class="fillContainer">
                        <div class="large"></div>
                        I am content after the large div
                    </div>
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView2" runat="server" Width="200px">second page view</telerik:RadPageView>
            </telerik:RadMultiPage>
        </form>
    </body>
</html>

placed inside a very simple dialog for the sake of testing:

<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" RenderMode="Lightweight" NavigateUrl="Default3.aspx"></telerik:RadWindow>

Regards,

Marin Bratanov
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Nick
Top achievements
Rank 1
answered on 23 Jun 2016, 01:32 PM

Hi Marin..

Thank you very much for your reply... I will recheck everything and try the solution provided by you.. And will let you know if the problem solves...

Regards,

Nick..

 

0
Danail Vasilev
Telerik team
answered on 04 Jul 2016, 12:30 PM
Hi Nick,

There is an issue in Chrome browser, related to scrollbars disappearing in iframes when their visibility is toggled. The issue has been reported to Chrome and can be reproduced with the code below:
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"></iframe>
HtmlPage2.html:
<body>
    <div style="border: 1px solid green; height: 1200px;">
    </div>
</body>

To workaround this issue in RadWindow with iframe you can either set the ReloadOnShow property to true, or reset the width/height of the iframe element:
Copy Code
function clientShow(sender, args) {
    var frameWidth = sender.GetContentFrame().style.width;
    sender.GetContentFrame().style.width = "";
    setTimeout(function () {
        sender.GetContentFrame().style.width = frameWidth;
    }, 0);
}
Copy Code
<telerik:RadWindow ID="RadWindow1" runat="server" NavigateUrl="HtmlPage2.html"OnClientShow="clientShow"></telerik:RadWindow>



Regards,
Danail Vasilev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Nick
Top achievements
Rank 1
answered on 06 Jul 2016, 02:40 PM

Hello Danail 

Thank you for your reply... I will try the provided workaround. And will let you know if it solves my problem.

I will be working again on this in few days..

 

Thanks again..

Nick.

 

Tags
Window
Asked by
Nick
Top achievements
Rank 1
Answers by
Nick
Top achievements
Rank 1
Marin Bratanov
Telerik team
Danail Vasilev
Telerik team
Share this question
or