stretch content of RadWindow on resize?

4 posts, 0 answers
  1. swegele
    swegele avatar
    20 posts
    Member since:
    Apr 2007

    Posted 01 Dec 2015 Link to this post

    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

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 02 Dec 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. swegele
    swegele avatar
    20 posts
    Member since:
    Apr 2007

    Posted 02 Dec 2015 in reply to Marin Bratanov Link to this post

    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

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 02 Dec 2015 Link to this post

    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
Back to Top