Currently a page loaded through HTTPS will throw a warning that unsecure content is loaded if the IconUrl of the RadWindow is set with a relative path. This happens because the framework sets the URL without regard for the protocol. A workaround is to always use full urls (e.g. https://mysite.com/images/myIcon.jpg).

If possible, RadWindow should check the protocol and fix the URL so that such warnings are not shown.

Admin update: You can follow this article and the sample it provides to create an adaptive RadWindow https://docs.telerik.com/devtools/aspnet-ajax/controls/window/mobile-support/responsive,-adaptive-and-elastic-capabilities#fluid-or-adaptive-design-with-radwindow and you can also tweak the provided code through the rich client-side API of the control so it matches your concrete requirements.



RadWindow is one of the controls we use a lot in our applications. As our applications get more and more optimized to be used on smartphones and tablets, we tried to redo some of our functionality or replace them with RadLightboxes or other ways. But the RadLightbox lacks a lot of the functionality the RadWindow has: windowmanager, dialogs, more focussed on regular web-page content,.... 

I have been waiting for adaptive RadWindow functionality for quite some time, and I really hope I'm not the only one! Today I've read your Q1 2015 road map and I decided to finally post this feature request here too (I contacted your support team about this a few weeks ago).

It's easy to dynamically create windows using the windowmanager, pass data between them, show dialogs, etc... 
It would be very nice to be able to still have all this functionality, but with added adaptive behavior.

If the viewport width is too small to display the window or dialog in a correct way, the window/dialog would need to open maximized immediately without restricting height/width.

It would be nice to keep the title-bar and the close functionality on top, but I really don't need to move, minimize, maximize, pin,... the window on a smartphone, only be able to view its contents, interact with the content and close the window if needed. A bit like your lightbox does, but less focused on images/galleries and more flexible using the managers and the existing API these windows already have.

This would of course need to work for windows with url's (iframe), contenttemplates, and dialogs too. 

I like the Bootstrap modal-window, for example. If your windows/dialogs could behave a bit more like that on mobile devices, but would keep the functionality of the window-manager, adding iframe-content, dialogs, I would be more than happy!

Thanks
Nick

The desired effect can be achieved easily with CSS and this approach will even allow for finer tuning of the desired effect.

The RadWindpw's ContentTemplate is a simple div element that has dimensions set in pixels by the RadWindow scripts, so you can control the way its contents flow just like any other generic div element on your page. Below follows an example.

In case an external page is loaded in the RadWindow (e.g., via the NavigateUrl property), it will be loaded with an iframe that has its width and height set to 100% of the RadWIndow content area. Thus, it is up to the content page to control its scrolling.

<%--A sample RadWindow declaration you can use for quick testing--%>
<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true">
	<ContentTemplate>
		<div class="desiredOverflow">
			Add your content here
			<div style="height: 1000px; width: 1000px; background-color: yellow;">
				some dummy content so you can test out the overflow CSS rules behavior
			</div>
		</div>
	</ContentTemplate>
</telerik:RadWindow>


/* some sample CSS that you can use to control the scrolling behavior of your content */
.desiredOverflow
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: scroll; /* set the desired value here */
	/* you can also use the other overflow rules for fine control */
	overflow-x: hidden; /* set the desired value here */
	overflow-y: scroll; /* set the desired value here */
}

The idea is to let a simple property have the RadWindow close on outside click like the RadLightBox: http://demos.telerik.com/aspnet-ajax/lightbox/examples/overview/defaultcs.aspx.

At the moment, a few lines of code are needed and you can find examples here: http://www.telerik.com/forums/close-modal-on-overlay-click#DGbE7tSl3kWR926gm99m9A.

In recent versions of Chrome (76.0.38...) we are experiencing an issue when we display a popup using ShowContentDuringLoad="false". The content goes out of bounds of the window. When that flag is true, the window displays as expected. I tried this using Telerik version 2019.2.514.45.



We've been using Telerik controls for some time and I am aware of the minimum frame height limit imposed by the browser but in this case it does not matter if the window height is 200px or 400px, we are still seeing the same issue.


We are using classic mode for Telerik controls.
 

See the attached zip for an example project and also a screenshot of what we are seeing.

If I remove the height from the frame in pageLoad() in javascript it displays OK.

oWindow.GetContentFrame().style.height = ""

 
I can't seem to override using a CSS style, I think the window is using what is stored in cssText.

oWindow.GetContentFrame().style.cssText = "width: 100%; height: 100%; border: 0px; position: absolute; top: -10000px;"


Can you please investigate and fix in Chrome. I would also like to see if you can provide a CSS style work around.

I've tried all sorts of style overrides and cannot seem to find one that works. It looks like whatever is specified in cssText is

what is used for the height.

 
Thanks for your help,

This will be an enumerator just like the Behaviors property. It should, however, list the behaviors that are not allowed for the control. The common use case is that the developer does not want his popup to be resizable, so he/she needs only DisabledBehaviors="Resize" instead of listing all others that should be allowed in the Behaviors property. 

A ShowOnTopWhenModal property would have the effect that any modal RadWindow (Modal=true) will increase greatly its z-index, just like it does when it is maximized. This property should take precedence over a maximized RadWindow (i.e. it should increase the z-index to more than 100 000).

A possible workaround:

<style>
    .topWindow {
        z-index: 100001 !important;
    }
</style>

for a markup of:
<telerik:RadWindow ID="topWindow" runat="server"
    Width="500"
    Height="300"
    VisibleOnPageLoad="true"
    CssClass="topWindow"
    Modal="true"></telerik:RadWindow>

If the content page has a title RadWindow should set it for its own title, unless its Title property has been set explicitly.

Since Q2 2013, when ShowContentDuringLoad=true (which is the default value) this does not happen.

The second workaround is using the OnClientPageLoad event:
			function OnClientPageLoad(sender)
			{
				try
				{
					var pageTitle = sender.get_contentFrame().contentWindow.document.title;
					sender.set_title(sender.get_title() == "" ? pageTitle : sender.get_title());
				}
				catch (err)
				{

				}
			}
The try-catch block is used to catch errors in case the page is from another domain and the JavaScript same-origin policy is in effect.

The event handler can also be attached to the RadWindow manager so that it will be used for all its RadWindows.

There are several ways to work around this:
1) disable autosizing (set AutoSize to false)
2) move the RadWindow after autoziging finishes (see attached example for a demo):
			function OnClientAutoSizeEnd(sender, args)
			{
				var wndBounds = sender.getWindowBounds();
				//this is the case when the viewport is not sufficient for the RadWindow
				//so the RadWindow is as tall as the viewport
				if (wndBounds.height == $telerik.getClientBounds().height)
				{
					sender.moveTo(wndBounds.x - 9);
				}
			}

3) avoid autosizing for the subsequent page loads in the content page.
This can be done by setting AutoSize to false and additionally the following function attached to the OnClientPageLoad event will provide autosizing for the first load without positioning issues:
 			function OnClientPageLoad(sender, args)
			{
				if (!sender.hasBeenShown)
				{
					sender.autoSize(false);
					sender.hasBeenShown = true;
				}
			}

4)  use partial postbacks in the content page so that it is not fully reloaded and the autosizing logic is not fired again automatically.

Thus, users can scroll down and see the content of the page behind maximized window.
Workaround for iOS and Android:

<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" OnClientCommand="OnClientCommand" />

<style>
        html, body {
            margin: 0px;
            padding: 0px;
            border: 0px;
        }
    </style>
    <script type="text/javascript">
        var currentDialog = null;

        function OnClientCommand(sender, eventArgs) {
            var commandName = eventArgs.get_commandName();

            if ($telerik.isTouchDevice) {
                if (commandName == "Maximize") {
                    document.body.style.position = 'fixed';
                    setTimeout(function () {
                        document.body.style.overflow = 'visible';
                    }, 100)

                }
                else if (commandName != "Pin") {
                    document.body.style.position = 'static';
                }
            }

            if ($telerik.isMobileSafari) {
                if (commandName == "Maximize") {
                    window.onscroll = centerDialog;
                    currentDialog = sender;
                }
                else if (commandName != "Pin") {
                    window.onscroll = null;
                    currentDialog = null;
                }
            }
        }

        function centerDialog() {
            if (currentDialog && currentDialog.center) {
                currentDialog.center();
            }
        }
    </script>

If you have multiple RadWindows opened only one has an active state (brigter colors for one). Closing it should activate the next one, so it is visually distinguishable, like MS Windows does. This should be the dialog that was either last opened, or was the last one active.
With Lightweight RenderMode this does not happen and the other dialog remains in its inactive state.

You can use the OnClientClose event to invoke the logic that activates the previous one:
			<telerik:RadWindow ID="MainWindow" runat="server" Modal="true" VisibleOnPageLoad="true" OnClientClose="activatePreviousWindow" RenderMode="Lightweight">
				<ContentTemplate>
					<telerik:RadButton ID="radbtnOpenWin" runat="server" Text="Open Window" AutoPostBack="false"
									   OnClientClicked="OpenWindow">
					</telerik:RadButton>
				</ContentTemplate>
			</telerik:RadWindow>
			<telerik:RadWindow ID="ChildWindow" runat="server" Modal="true" OnClientClose="activatePreviousWindow" RenderMode="Lightweight">
				<ContentTemplate>
					Child Window
				</ContentTemplate>
			</telerik:RadWindow>
			<script type="text/javascript">
				function activatePreviousWindow(sender, args) {
					setTimeout(function () {
						sender._getWindowController().notifyWindowClosed(sender);
					});
				}
				
				function OpenWindow(sender, args) {
					var window = $find("<%=ChildWindow.ClientID%>");
					window.show();
				}
			</script>

Implement the ability to set the size of RadWindow in percents out of the box. The following knowledge base article describes how it could be achieved for the time being using the RadWindow client-side API:

http://www.telerik.com/support/kb/aspnet-ajax/window/setting-size-in-percent-for-the-radwindow.aspx

Error message: Unable to get property '_handlesCollection' of undefined or null reference
when RenderMode=Lightweight

Workarounds:
- enable the default behaviors to enable the Resize (and thus- maximize0 functionality, restore behaviors later:
				function OpenForm(sender, args) {
					var oWnd = radopen(null, "existing");
					var currBehaviors = oWnd.get_behaviors();
					oWnd.set_behaviors(Telerik.Web.UI.WindowBehaviors.Default);
					if (!oWnd.isMaximized()) {
						oWnd.maximize();
					}
					oWnd.set_behaviors(currBehaviors);
					
				}
- OR, have the Behaviors property contain either of the Maximize or Resize behavior. Or use the Default value

			<telerik:RadWindowManager runat="server" ID="rwm1">
				<Windows>
					<telerik:RadWindow runat="server" ID="existing" Behaviors="Close, Resize">
					</telerik:RadWindow>
				</Windows>
			</telerik:RadWindowManager>

			<telerik:RadButton ID="Button5" Text="open existing rw from rwm 3" AutoPostBack="false" OnClientClicked="OpenForm" runat="server"></telerik:RadButton>

			<script>
				function OpenForm(sender, args) {
					var oWnd = radopen(null, "existing");
					
					
				}
				function OnClientShow(sender, args) {
					if (!sender.isMaximized()) {
						sender.maximize();
					}
				}
			</script>

Based on customer report: scrollbar of RadWindow disappears after moving the window. Producible on our demos -- http://demos.telerik.com/aspnet-ajax/window/examples/minmaxsize/defaultcs.aspx.

Note: Chrome specific bug: https://bugs.chromium.org/p/chromium/issues/detail?id=641881

When a RestrictionZone is used the RadWindows are not positioned correctly in all cases.
When the number of windows is low (e.g. below approximately 6) the dimensions set to the RadWindows are not optimal. In some cases not all the available viewport is filled even if the number of popups matches the needed (e.g. 6 instances should be able to cover the viewport, but they cover about 2/3 of its height).

When the input inside RadWindow is focused the on-screen keyboard is shown, the page is scrolled so the input is into view above the keyboard and then the keyboard hides automatically. This is caused by using a RestrictionZone. Remove this property to avoid the behavior.

The WAI-ARIA specification indicates that there are alert, alertdialog and dialog roles, the appropriate one must be applied to the RadWindow dialogs.
http://www.w3.org/TR/wai-aria/roles#alert
http://www.w3.org/TR/wai-aria/roles#alertdialog
http://www.w3.org/TR/wai-aria/roles#dialog

In the meantime, you can use a script like this to apply the role:
        <script type="text/javascript">
            function OnClientShow(sender, args) {
                var role = "dialog";
                 if (sender._isPredefined) { //this captures RadAlert, RadConfirm and RadPrompt
                   role = "alertdialog"; 
                }
                //this will be executed for all child RadWIndows from that manager so you can apply a different role (e.g., dialog)
               sender.get_popupElement().setAttribute("role", role);
            }
        </script>

        <telerik:RadWindowManager runat="server" ID="RadWindowManager1" EnableAriaSupport="true" OnClientShow="OnClientShow"></telerik:RadWindowManager>


Note: Testing with the JAWS screen reader indicates that it does not recognize dynamically created HTML, and all RadWindow dialogs are created dynamically with JavaScript. This is a shortcoming of the reader.

The Classic RenderMode hides all iframes on the page when the user starts moving or resizing the RadWindow.

This prevents them from consuming the mouse events and thus ensures proper behavior, but hides content from the user which is unexpected. You can find attached below an illustration of the issue.

Due to numerous requests about changing this, the Lightweight mode does not hide the iframes. Thus in some cases, if the browser had not redrawn the RadWindow fast enough, the mouse events may get captured by another iframe.

Cast your vote whether you want the Lightweight mode to do this as well.

You can change this by using the following script (the second instance has the necessary handlers attached, in a real app you can do that via the RadWindowManager, or via an ASP Theme)

		<telerik:RadWindow runat="server" ID="rw1" VisibleOnPageLoad="true" NavigateUrl="Default2.aspx" RenderMode="Lightweight"></telerik:RadWindow>
		<telerik:RadWindow runat="server" ID="rw2" VisibleOnPageLoad="true" NavigateUrl="Default3.aspx" RenderMode="Lightweight"
			OnClientDragStart="hideFrames" OnClientResizeStart="hideFrames" OnClientDragEnd="showFrames" OnClientResizeEnd="showFrames">
		</telerik:RadWindow>
		<script>
			function hideFrames(sender, args) {
				setIframesVisible(false, sender);
			}
			function showFrames(sender, args) {
				setIframesVisible(true, sender);
			}
			function setIframesVisible(bVisible, wnd) {
				var iframes = document.getElementsByTagName("iframe");
				var iframeToSkip = wnd.get_contentFrame();
				for (var i = 0, length = iframes.length; i < length; i++) {
					var frame = iframes[i];
					if (iframeToSkip && (iframeToSkip === frame || iframeToSkip == frame))//compare through == and === because of FF 3.5 and 3.6
						iframeToSkip = null;
					else {
						frame.style.visibility = bVisible ? "" : "hidden";

						//For some extremely strange reason in IE the iframe does not get hidden properly and continues to consume mouse events
						if ($telerik.isIE)
							try {
								frame.contentWindow.document.body.style.visibility = bVisible ? "" : "hidden";
							} catch (ex) {
							}
					}
				}
			}
		</script>