Problems w/ RadPane Scrolling

2 posts, 0 answers
  1. Frank
    Frank avatar
    10 posts
    Member since:
    Nov 2008

    Posted 04 Sep 2009 Link to this post

    I have an IFrame inside a RadPane. When the contents of the IFrame overflow the length of the RadPane, a scroll bar shows but it does not allow user to scroll all the way to the bottom of the page. The body of my page is as follows:

     

    <body style="margin:0px;height:100%;" scroll="no" bgcolor="#38475a">  
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>  
            <!-- Navigation and Header -->  
            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #cccccc;">  
                <tr style="background-color: #636c7b;" id="NavRow" runat="server">  
                    <td><img src="images/navspacer.jpg" border="0" width="250px" height="29px" alt="" /></td>  
                    <td>  
                        <ipc:TabNavigation ID="MyNavBar" runat="server" ActiveTab="3" />  
                    </td>  
                    <td width="100%" align="right" style="padding-right:4px"><a href="logout.aspx">Log Out</a><ipc:ChangePasswordWindow runat="server" ID="ipcChangePasswordWindow" NavigateUrl="ChangePassword.aspx" VisibleOnPageLoad="false" ReloadOnShow="true" Modal="true" ShowContentDuringLoad="false" SkinID="WebBlue" Width="400" Height="400" Behaviors="None" VisibleStatusbar="false" ShowDividerBeforeLink="true" VisibleTitlebar="False" Skin="WebBlue" /></td>  
                    <td rowspan="2" style="width:272px; vertical-align:top;">  
                        <ipc:NewsControl ID="myNewsBar" runat="server" />  
                    </td>  
                </tr>  
                <tr style="background-color: #636c7b;">  
                    <td style="background-image: url(images/g_nav_bg.jpg); background-repeat: repeat-x; height: 29px" width="250px">  
                    </td>  
                    <td id="NavCell" class="NavCell" style="background-image: url(images/g_nav_bg.jpg); background-repeat: repeat-x;
                        height: 29px">  
                    </td>  
                    <td style="background-image: url(images/g_nav_bg.jpg); background-repeat: repeat-x;
                        height: 29px">  
                    </td>  
                </tr>  
            </table>  
              
            <telerik:RadSplitter ID="RadSplitter1"   
                                 runat="server"   
                                 Width="100%"   
                                 Height="100%" HeightOffset="58" 
                                 Skin="WebBlue"   
                                 BorderSize="0"   
                                 PanesBorderSize="0"   
                                 BorderWidth="0">  
                <telerik:RadPane ID="leftPane"   
                                 runat="server"   
                                 Width="273px"   
                                 Scrolling="None"   
                                 OnClientPaneExpanded="PaneExpanded"   
                                 OnClientPaneCollapsed="PaneCollapsed"   
                                 BorderStyle="None"   
                                 BorderWidth="0px"   
                                 BorderColor="#D1D8E2">  
                    <telerik:RadSplitter ID="RadSplitter2"   
                                         runat="server"   
                                         Width="100%" 
                                         Height="100%" 
                                         Skin="WebBlue" 
                                         BorderSize="0" 
                                         PanesBorderSize="0" 
                                         Orientation="Horizontal" 
                                         BorderWidth="0">  
                        <telerik:RadPane ID="tabPane" 
                                         runat="server" 
                                         Width="273px" 
                                         Scrolling="None" 
                                         Height="39px" 
                                         BorderStyle="None" 
                                         BorderWidth="0px" 
                                         BorderColor="#D1D8E2">  
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#D1D8E2">  
                                <tr>  
                                    <td height="38px" valign="top">  
                                        <a href="archive_basic.aspx">  
                                            <img src="images/searchbacktab.jpg" alt="" border="0" width="91" height="39" />  
                                        </a>  
                                    </td>  
                                    <td id="AdvTab" runat="server" height="39px" valign="top">  
                                        <a href="archive_thumbs.aspx">  
                                            <img src="images/thumbfronttab.jpg" alt="" border="0" width="91" height="39" />  
                                        </a>  
                                    </td>  
                                    <td id="LibTab" runat="server" height="39px" valign="top">  
                                        <a href="library.aspx">  
                                            <img src="images/librarybacktab.jpg" alt="" border="0" width="91" height="39" />  
                                        </a>  
                                    </td>  
                                </tr>  
                            </table>  
                        </telerik:RadPane>    
                        <telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="None" EnableResize="false"/>  
                        <telerik:RadPane ID="navigationPane" 
                                         runat="server" 
                                         Width="273px" 
                                         Scrolling="None" 
                                         Height="100%" 
                                         BorderStyle="None" 
                                         BorderWidth="0px" 
                                         BorderColor="#D1D8E2">  
                            <telerik:RadSplitter ID="RadSplitter3"   
                                                 runat="server"   
                                                 Width="100%" 
                                                 Height="100%" 
                                                 Skin="WebBlue" 
                                                 BorderSize="0" 
                                                 PanesBorderSize="0" 
                                                 Orientation="Horizontal" 
                                                 BorderWidth="0">  
                                <telerik:RadPane ID="LocationsPane" 
                                                 runat="server" 
                                                 Width="100%" 
                                                 Scrolling="Both" 
                                                 Height="100%" 
                                                 BackColor="#D1D8E2" 
                                                 BorderStyle="None" 
                                                 BorderWidth="0px" 
                                                 BorderColor="#D1D8E2">  
                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#D1D8E2">  
                                        <tr>  
                                            <td valign="top" height="100%" id="RadTreeViewCell">  
                                                <telerik:RadTreeView   
                                                    ID="RadTreeView1"   
                                                    runat="server"   
                                                    Height="100%"   
                                                    AutoPostBack="True"   
                                                    OnClientNodeExpanded="onClientNodeToggle" 
                                                    OnClientNodeCollapsed="onClientNodeToggle"   
                                                    OnClientNodeClicked="ClientClickHandler">  
                                                </telerik:RadTreeView>  
                                            </td>  
                                        </tr>  
                                    </table>  
                                </telerik:RadPane>    
                                <telerik:RadSplitBar ID="RadSplitbar3" runat="server" CollapseMode="None"  EnableResize="false"/>  
                                <telerik:RadPane ID="DatePreviewPane" 
                                                 runat="server" 
                                                 Width="273px" 
                                                 Height="215px" 
                                                 Scrolling="None" 
                                                 BorderStyle="None" 
                                                 BorderWidth="0px" 
                                                 BorderColor="#D1D8E2" 
                                                 BackColor="#D1D8E2">  
                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#D1D8E2">  
                                        <tr>  
                                            <td colspan="3" valign="bottom" align="center">   
                                                 <table cellpadding="0" cellspacing="0" width="100%">  
                                                    <tr>  
                                                        <td class="PaneHeader" align="center" style="padding-right:14px">  
                                                            Date 
                                                        </td>  
                                                    </tr>  
                                                    <tr>                                      
                                                        <td style="padding-top:10px;padding-bottom:10px" align="center">  
                                                            <asp:Calendar ID="Calendar1" runat="server" BorderColor="darkslategray" BorderStyle="solid" BorderWidth="0" Font-Size="XX-Small" Font-Names="Verdana" BackColor="white" Width="200px" Height="160px"></asp:Calendar>  
                                                        </td>  
                                                    </tr>    
                                                </table>  
                                            </td>  
                                        </tr>  
                                    </table>  
                                </telerik:RadPane>    
                            </telerik:RadSplitter>  
                        </telerik:RadPane>  
                    </telerik:RadSplitter>  
                </telerik:RadPane>  
                <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" EnableResize="false"/>  
                <telerik:RadPane ID="rightPane"   
                                 runat="server"   
                                 Scrolling="Y"   
                                 BackColor="#232323"   
                                 BorderStyle="None"   
                                 BorderWidth="0px"   
                                 BorderColor="#D1D8E2">  
                    <iframe id="ThumbFrame" src="thumb_detail.aspx" frameborder="0" width="100%" height="100%" runat="server" scrolling="no"></iframe>                  
                </telerik:RadPane>  
            </telerik:RadSplitter>  
        </form>  
    </body>  
     

    When the ThumbFrame iFrame has many images, the user cannot scroll down to see all of them.

    Here is an example html generated by  thumb_detail.aspx  :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head><title>  
    </title><link href="StyleSheet.css" type="text/css" rel="STYLESHEET" /> 
    </head> 
    <body style="background-color:#232323">  
        <form name="form1" method="post" id="form1">  
            <div id="divThumbnails">  
                <table> 
                    <tr> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/100000.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/100100.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/100300.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/101500.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/102100.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/102600.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/103400.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/103500.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/103600.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/103800.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td><td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/104000.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/104100.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/104200.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/104400.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/104700.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/104900.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/105000.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/105100.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/105200.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/105300.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/105400.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/105600.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/105700.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/105800.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="grid">  
                            <img alt="" src="http://192.168.100.40/Store1/20090903/192.168.50.61_80/Camera_1/105900.jpg" height="180px" width="240px" id="" style="border:none" /> 
                        </td> 
                        <td>&nbsp;</td> 
                        <td>&nbsp;</td> 
                        <td>&nbsp;</td> 
                    </tr> 
                </table> 
            </div> 
        </form> 
    </body> 
    </html> 
     
    You won't have the images, but the size of the image tags will be the same.

    What am I doing wrong to make the pane not scroll correctly?
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 09 Sep 2009 Link to this post

    Hi Frank,

    The element which should have a scrollbar in this case should be the IFRAME itself and not the RadPane. That is why no scrollbar is generated - I am not sure why you get such on your side but this is not the case on mine.

    What I can suggets is to take advantage of the built in functionality the splitter provides and load teh external page by using the ContentUrl property as shown below:

      <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" EnableResize="false" /> 
            <telerik:RadPane ID="rightPane" runat="server" ContentUrl="thumb_detail.aspx" BackColor="#232323" 
                BorderStyle="None" BorderWidth="0px" BorderColor="#D1D8E2">  
            </telerik:RadPane> 
        </telerik:RadSplitter> 

    When this property is set, teh splitter itself creates an IFRAME element and loads the page. Furthermore, it will handle scrolling, resize, etc and you can also reference and manipulate the IFRAME by using the API. An online demo about the property is available below:

    http://demos.telerik.com/aspnet-ajax/splitter/examples/externalcontentloading/defaultcs.aspx

    Greetings,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top