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

[Solved] RadDock issue with height and iframe

2 Answers 143 Views

Dock

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

ido nahmias asked on 25 Apr 2013, 09:11 AM

tab1Exp.JPG

tab2Exp.JPG

hello,

there is an issue with fixed height of the raddock when its inside of an iframe.
the thing is that the raddock and the rdcontent gets the same height which causes the raddocks to overlap each other.
i have tested it with explorer 10 and firefox and it happens with both of them with chrome its working fine.

this is the main page:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body style="height:100%; width:100%;">

<form id="Form1" method="post" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"/>

<div id="divRadTabStrip" runat="server">

<div dir="ltr" >

<telerik:RadTabStrip Skin="Sitefinity" ID="tbsFeedbaks" Runat="server" MultiPageID="mltpFeedbacks" SelectedIndex="0">

<Tabs>

<telerik:RadTab PageViewID="pvFirstTab" Text="tab1"></telerik:RadTab>

<telerik:RadTab PageViewID="pvSecondTab" Text="tab2"></telerik:RadTab>

<telerik:RadTab PageViewID="pvThirdTab" Text="tab3"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</div>

<telerik:RadMultiPage ID="mltpFeedbacks" Runat="server" SelectedIndex="0" width="100%">

<telerik:RadPageView ID="pvFirstTab" runat="server">

<iframe frameborder="0" id="frmFeedbackByQuestion" name="frmFeedbackByQuestion" runat="server" src="feedBacksItemByQues.aspx" width="955px" height="500px" allowTransparency="true"></iframe>

</telerik:RadPageView>

<telerik:RadPageView ID="pvSecondTab" runat="server">

<iframe id="frmFeedbackBySubjects" name="frmFeedbackBySubjects" runat="server" frameborder="0" src="feedBackExercistBySubjAndStud.aspx" width="955px" height="500px" allowTransparency="true"></iframe>

</telerik:RadPageView>

<telerik:RadPageView ID="pvThirdTab" runat="server">

<iframe id="frmFeedbackGrades" name="frmFeedbackGrades" runat="server" frameborder="0" src="feedbackActivitiesGradesByItemInGroup.aspx" width="955px" height="500px" allowTransparency="true"></iframe>

</telerik:RadPageView>

</telerik:RadMultiPage>

</form>

</body>

</html>

all the tabs has the same HTML:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

.topSpacer {margin-top:10px;}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"/>

<telerik:RadDockLayout ID="RadDockLayout1" runat="server">

<telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Vertical" BorderWidth="0">

<telerik:RadDock ID="dockChart" EnableRoundedCorners="true" runat="server" DockMode="Docked" EnableDrag="false" Width="910px" Height="200px" Text="Assignments" >

<ContentTemplate>

<div>

text text text text text text text text text text text text text text text

</div>

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="dockSumTable" EnableRoundedCorners="true" runat="server" DockMode="Docked" EnableDrag="false" Width="910px" Height="180px" CssClass="topSpacer">

<ContentTemplate>

<div style="width: 100%; background-color: #ffffff;" >

<table>

<tbody>

<tr>

<td>111111111111111</td>

<td>222222222222222</td>

<td>333333333333333</td>

</tr>

<tr>

<td>444444444444444</td>

<td>555555555555555</td>

<td>666666666666666</td>

</tr>

</tbody>

</table>

</div>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</form>

</body>

</html>

you can see in the pictures that the height is not calculated properly on tab2 and tab3

2 Answers, 1 is accepted

Accepted

answered on 29 Apr 2013, 01:52 PM

Hello Ido,

You can try the following approach to ensure that the height of the docks will be set properly when they are displayed in an initially invisible page view:

1. Attach handler for the client-side event OnClientTabSelected of RadTabStrip:

<telerik:RadTabStrip Skin="Sitefinity" ID="tbsFeedbaks" Runat="server" MultiPageID="mltpFeedbacks" SelectedIndex="0" OnClientTabSelected="OnClientTabSelected">

<Tabs>

<telerik:RadTab PageViewID="pvFirstTab" Text="tab1"></telerik:RadTab>

<telerik:RadTab PageViewID="pvSecondTab" Text="tab2"></telerik:RadTab>

<telerik:RadTab PageViewID="pvThirdTab" Text="tab3"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

2. Use the handler function to get all docks in the iframe element and repaint them:

<script type="text/javascript">

function OnClientTabSelected(sender, args) {

var multiPage = $find("<%=mltpFeedbacks.ClientID %>");

var pageView = multiPage.get_selectedPageView();

if (pageView) {

var docks = $telerik.$(pageView.get_element().getElementsByTagName("iframe")[0].contentWindow.document).find(".RadDock");

$telerik.$.each(docks, function (i, val) {

var radControl = val.control;

if (radControl)

radControl.repaint();

});

}

</script>

Regards,
Slav
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.