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> </td> |
| <td> </td> |
| <td> </td> |
| </tr> |
| </table> |
| </div> |
| </form> |
| </body> |
| </html> |
What am I doing wrong to make the pane not scroll correctly?
1 Answer, 1 is accepted
0
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:
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.
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.