RadDock issue with height and iframe

3 posts, 1 answers
  1. ido nahmias
    ido nahmias avatar
    64 posts
    Member since:
    May 2006

    Posted 25 Apr 2013 Link to this post

    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:
    <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" >
                <!-- SET SKIN: Lnet_innerReports -->
                    <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>
            </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:
    <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
                        text text text text text text text text text text text text text text text
                        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. Answer
    Slav
    Admin
    Slav avatar
    1356 posts

    Posted 29 Apr 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ido nahmias
    ido nahmias avatar
    64 posts
    Member since:
    May 2006

    Posted 14 May 2013 Link to this post

    thank you that solved the problem.
    i just want to add that the same code needs to be added on the page load to fix the problem at the first time that the page is loading.
    (i have this page in another multipage)
Back to Top