Kate,
As I said previously, the height values are 0 when those tabs are initially hidden, even using jQuery. Therefore, this solution will not work.
I cannot attach a runnable project as you've requested since the only files I can attach through this forum are picture files. However, I've included the markup for the aspx here. It's the same page you sent to me previously, but I've modified it to illustrate my issue.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TabStrip_DefaultCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<head runat="server">
<title></title>
<style type="text/css">
.page1, .page2, .page3
{
border: 1px solid red; /*height: 100px;*/
}
.multipage
{
border: 1px green solid;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:radscriptmanager runat="server" id="radscriptmanager1">
</telerik:radscriptmanager>
<script type="text/javascript">
function pageLoad() {
//set second tab to selected to ensure visibility
var multiPage = $find("<%=multipageouter.ClientID %>");
var page2outer = multiPage.findPageViewByID("page2outer");
//page2outer.set_selected(true);
//getting the height of each nested pageview in page2outer
$telerik.$("#<%=multipage1.ClientID %> > div").each(function () {
alert("Height: " + $telerik.$(this).height());
});
}
</script>
<div>
<telerik:RadTabStrip ID="tabStripOuter" runat="server" SelectedIndex="0" MultiPageID="multipageouter">
<Tabs>
<telerik:RadTab runat="server" Text="Outer Tab 1" Value="1" PageViewID="page1outer" />
<telerik:RadTab runat="server" Text="Outer Tab 2" Value="2" PageViewID="page2outer" />
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="multipageouter" runat="server" cssclass="multipage" SelectedIndex="0">
<telerik:RadPageView ID="page1outer" runat="server" CssClass="page1">
page 1 outer
</telerik:RadPageView>
<telerik:RadPageView ID="page2outer" runat="server" CssClass="page2">
<telerik:radtabstrip id="tabStrip1" runat="server" selectedindex="0" multipageid="multipage1">
<Tabs>
<telerik:RadTab runat="server" Text="Root RadTab1" Value="1" PageViewID="page1">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Root RadTab2" Value="2" PageViewID="page2">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Root RadTab3" Value="3" PageViewID="page3" Selected="true">
</telerik:RadTab>
</Tabs>
</telerik:radtabstrip>
<telerik:radmultipage runat="server" id="multipage1" cssclass="multipage" SelectedIndex="0">
<telerik:RadPageView ID="page1" runat="server" CssClass="page1">
page1
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="page2" CssClass="page2">
page2
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="page3" CssClass="page3">
page3
<br />
page3
<br />
</telerik:RadPageView>
</telerik:radmultipage>
</telerik:RadPageView>
</telerik:RadMultiPage>
</div>
<br />
</form>
</body>
</html>
I nested the tabstrip/multipage inside another tab to show that the height is 0 when the parent tab is initially hidden. The pageLoad() function invokes alerts to show the heights of each pageview. I have it initially set up so that the pageviews I'm trying to resize are contained inside another pageview that is not initially visible. The heights of all these pageviews are 0 in this case according to jQuery. If you uncomment the line that selects the outer tab and run it again, you will see that the height is > 0 as expected.
Is there a solution that I can use to obtain the heights of these
pageviews without having to ensure they are visible first? I will need
to apply this same solution to many tabstrips on my page, some of which
are nested several layers deep inside other controls, so the solution
must be fast and clean.
Geoff