My RadWindows are sizing properly on load. But if I resize my RadWindow manually the content doesn't stretch / grow. Is there a way to do this so if I make my RadWindow full screen that it's content stretches to full screen too?
Thanks,
Sean
3 Answers, 1 is accepted
Hi Sean,
This depends on the way the content is designed. If it resizes in a regular browser window, it will resize in a RadWindow's content page as well. This is usually done by setting the size of your page elements in percent. RadWindow has its size in pixels and these values are updated when it resizes, thus content inside has static dimensions to draw upon to facilitate resizing.
If you are using the ContenTemplate and your resizing logic relies on JavaScript (e.g., the window.resize event), you can use the OnClientResizeEnd event RadWindow offers: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/events/onclientresizeend.
Regards,
Telerik
Rank 1
The only way to get RadWindow sizing to work (per all the articles you guys have) is to have something with pixel sizing. So the first thing in all my popup windows is a RadAjaxPanel with pixel width.
What do you think would work...perhaps :
1. OnLoad of window change the RadAjaxPanel width to 100% and from then on it should resize with RadWindow
2. Always capture OnClientResizeEnd and manual resize RadAjaxPanel accordingly
Thanks for the help!
Sean
Hi Sean,
You can simply set the main wrappers dimensions to 100%. Here is a basic example:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> html, body, form { margin: 0; padding: 0; height: 100%; } .fullSize { width: 100%; height: 100%; background: yellow; } </style> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="Scriptmanager1" runat="server" /> <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="100%" Height="100%"> <div class="fullSize">some content</div> </telerik:RadAjaxPanel> </form> </body></html>and the same approach can work in the content template:
<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true"> <ContentTemplate> <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="100%" Height="100%"> <div class="fullSize">some content</div> </telerik:RadAjaxPanel> </ContentTemplate></telerik:RadWindow>Note, however, that rarely wrapping the entire content of a page in an UpdatePanel is useful, because it does not actually reduce the size of the request, but then causes JS to be used to recreate the nodes instead of the browser engine, so it may actually be slower than a full postback.
Regards,
Telerik