Hi,
I'm using a RadWindow to dynamically host a "complex" UserControl that has section dynamically hiding and showing from javascript events. As a result, the content of the RadWindow grows or shrinks. I'd like to have the RadWindow also grow or shrink instead of having the scroll bar appear. AutoSize only resizes the windows on the initial load, so I cannot use it.
Here is a sample project that reproduce the problem (please run it) :
WebForm2.aspx
WebUserControl2.ascx
The problems are:
1) The initial positioning is wrong (Top=100 is not respected). This seems to happen when I add the style="width: 500px;" for the first div.
2) The initial height is wrong: too small.
3) After that, if we resize manually, it seems to work ok where no scrollbars are visible, but if they appear the 16px padding is not enough and the windows becomes narrower on each subsequent click.
4) I tried calling rwnd.autoSize() instead, but it does not produce a good result as the RadWindow is initially too narrow, it sometime moves around in the screen and it always leaves a big blank space in the bottom of the RadWindow. Try it.
So, can you please help me to find out what is the best way to match the windows size to its content ?
Thanks,
Dominic.
using v2009.3.1208.35
I'm using a RadWindow to dynamically host a "complex" UserControl that has section dynamically hiding and showing from javascript events. As a result, the content of the RadWindow grows or shrinks. I'd like to have the RadWindow also grow or shrink instead of having the scroll bar appear. AutoSize only resizes the windows on the initial load, so I cannot use it.
Here is a sample project that reproduce the problem (please run it) :
WebForm2.aspx
<form id="form1" runat="server"> |
<asp:ScriptManager ID="RadScriptManager1" runat="server"> |
</asp:ScriptManager> |
<telerik:RadWindow ID="wnd" runat="server" Modal="true" ShowContentDuringLoad="true" VisibleStatusbar="false" VisibleOnPageLoad="true" |
VisibleTitlebar="true" Behaviors="Close,Move,Resize" AutoSize="false" EnableViewState="false" Skin="Default" Top="100" /> |
<script type="text/C#" runat="server"> |
protected void Page_Load(object sender, EventArgs e) |
{ |
Control ctrl = LoadControl("WebUserControl2.ascx"); |
wnd.ContentContainer.Controls.Add(ctrl); |
} |
</script> |
<script type="text/javascript"> |
<!-- |
Sys.Application.add_load(function() { |
var $innerDiv = $('#innerDiv'); |
$innerDiv.click(function(evt) { |
var rwnd = $find('<%= wnd.ClientID %>'); |
var w = this.offsetWidth + 16; // 16 is a magic number to cope for the borders of the RadWindow... |
if (rwnd.get_width() != w) { |
rwnd.set_width(w); |
} |
var h = this.offsetHeight + 50; // 50 is an arbitrary fudge factor to compensate for borders and title bar... |
if (rwnd.get_height() != h) { |
rwnd.set_height(h); |
} |
}); |
$innerDiv.click(); |
}); |
--> |
</script> |
</form> |
WebUserControl2.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl2.ascx.cs" Inherits="WebApplication1.WebUserControl2" %> |
<div id="innerDiv"> |
<div style="width: 500px;"> |
<input type="radio" id="rb01" name="rb" /><label for="rb01">Show div1</label> |
<input type="radio" id="rb02" name="rb" /><label for="rb02">Show div2</label> |
<input type="radio" id="rb03" name="rb" /><label for="rb03">Show none</label> |
</div> |
<div id="div1" style="display:none;"> |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non feugiat sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> |
</div> |
<div id="div2" style="display:none;"> |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non feugiat sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin fermentum nulla tellus, sed sodales lacus. Maecenas ante eros, varius vel euismod ac, condimentum nec purus. In feugiat viverra nulla a porta. Etiam bibendum blandit purus sagittis dignissim. Integer eleifend porta imperdiet. Curabitur vehicula lobortis lorem, et placerat erat venenatis at. Aenean sit amet mauris a elit sagittis ultrices ut eget nisl. In in quam erat. Sed porta molestie ultricies. Pellentesque pulvinar risus eget nisi suscipit in porttitor nulla semper. </p> |
</div> |
<script type="text/javascript"> |
<!-- |
$("#rb01").click(function() { |
$("#div1").show(); |
$("#div2").hide(); |
}); |
$("#rb02").click(function() { |
$("#div1").hide(); |
$("#div2").show(); |
}); |
$("#rb03").click(function() { |
$("#div1").hide(); |
$("#div2").hide(); |
}); |
--> |
</script> |
</div> |
The problems are:
1) The initial positioning is wrong (Top=100 is not respected). This seems to happen when I add the style="width: 500px;" for the first div.
2) The initial height is wrong: too small.
3) After that, if we resize manually, it seems to work ok where no scrollbars are visible, but if they appear the 16px padding is not enough and the windows becomes narrower on each subsequent click.
4) I tried calling rwnd.autoSize() instead, but it does not produce a good result as the RadWindow is initially too narrow, it sometime moves around in the screen and it always leaves a big blank space in the bottom of the RadWindow. Try it.
So, can you please help me to find out what is the best way to match the windows size to its content ?
Thanks,
Dominic.
using v2009.3.1208.35