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

Rad window shows no scrollbars in chrome

5 Answers 290 Views

Window

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

5 Answers, 1 is accepted

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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.

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.