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

stretch content of RadWindow on resize?

3 Answers 228 Views
Window
This is a migrated thread and some comments may be shown as answers.
swegele
Top achievements
Rank 1
swegele asked on 01 Dec 2015, 05:31 PM

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

Sort by
0
Marin Bratanov
Telerik team
answered on 02 Dec 2015, 09:07 AM

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,

Marin Bratanov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
swegele
Top achievements
Rank 1
answered on 02 Dec 2015, 09:22 AM

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

0
Marin Bratanov
Telerik team
answered on 02 Dec 2015, 09:34 AM

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">
 
    <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,

Marin Bratanov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Window
Asked by
swegele
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
swegele
Top achievements
Rank 1
Share this question
or