| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %> |
| <!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" style="height: 100%; width: 100%"> |
| <head runat="server"> |
| <title>Untitled Page</title> |
| </head> |
| <body style="height: 100%; width: 100%"> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadSplitter BorderSize="0" ID="RadSplitter1" Width="90%" Height="100%" |
| Orientation="Horizontal" runat="server"> |
| <telerik:RadPane ID="rpnHeader" Height="100%" Width="100%" runat="server" Scrolling="both"> |
| <table cellpadding="3" cellspacing="0" width="100%" border="0" height="100%"> |
| <tr valign="top"> |
| <td style="width: 25%; text-align: center"> |
| <telerik:RadDockZone ID="RadDockZone1" runat="server" BorderStyle="None"> |
| <telerik:RadDock ID="RadDock1" Width="100%" Height="100%" runat="server" Title="Email"> |
| <ContentTemplate> |
| <div style="padding: 3px"> |
| <table cellpadding="2" cellspacing="0" style="width: 100%;"> |
| <tr> |
| <td> |
| New Emails</td> |
| <td align="right"> |
| 0</td> |
| </tr> |
| <tr> |
| <td> |
| New Emails</td> |
| <td align="right"> |
| 0</td> |
| </tr> |
| <tr> |
| <td> |
| New Emails</td> |
| <td align="right"> |
| 0</td> |
| </tr> |
| <tr> |
| <td> |
| New Emails</td> |
| <td align="right"> |
| 0</td> |
| </tr> |
| </table> |
| </div> |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </td> |
| <td style="width: 50%; text-align: center"> |
| <telerik:RadDockZone ID="RadDockZone2" runat="server" BorderStyle="None"> |
| <telerik:RadDock ID="RadDock2" runat="server" Title="Schedule"> |
| <ContentTemplate> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| </ContentTemplate> |
| </telerik:RadDock> |
| <telerik:RadDock ID="RadDock3" runat="server" Title="Hahaha"> |
| <ContentTemplate> |
| asdasdsad |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </td> |
| <td style="width: 25%; text-align: center"> |
| <telerik:RadDockZone ID="RadDockZone3" runat="server" BorderStyle="None"> |
| <telerik:RadDock ID="RadDock4" runat="server" Title="Hahaha"> |
| <ContentTemplate> |
| asdasdsad |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </td> |
| </tr> |
| </table> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
| </html> |
Hi, I'm not sure whether to report this in docking or splitter forum.
When I tried to put docking controls inside a splitter, the dock just won't scroll down if its' height is very long. And this is only in IE. It works just fine in Firefox. Stripped down code is included above.
Also, I made screenshots from my original program to illustrate my point:
http://www.m1o.com/telerik/ie_dock_bug.gif
This one is IE7 on Vista. Notice how the docks just overflow outside the scrolls inside the splitter. It stays static when I tried to scroll down
http://m1o.com/telerik/ff_dock_bug.gif
This is Firefox. Everything looks and works just nicely, even with RadScheduler added.
5 Answers, 1 is accepted
0
Accepted
Hi Rei,
Thank you for the detailed description, the screenshots and the provided code.
The problem you experience is due to the way the controls inside the RadPane are positioned. The RadDockZone and the docked RadDock are relatively positioned while the RadPane's position property is not set and its default value is static. To solve the problem I suggest you the following workaround. Add the following style just after the opening form tag:
You can also take a look at this KB article which references the same issue. It is a problem in RadSplitter on which we are working and will be fixed for one of the next updates of the control.
Please, let me know if you need further assistance.
Best regards,
Sophy
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Thank you for the detailed description, the screenshots and the provided code.
The problem you experience is due to the way the controls inside the RadPane are positioned. The RadDockZone and the docked RadDock are relatively positioned while the RadPane's position property is not set and its default value is static. To solve the problem I suggest you the following workaround. Add the following style just after the opening form tag:
| <style type="text/css"> |
| .pane |
| { |
| position: relative; |
| } |
| #RAD_SPLITTER_PANE_CONTENT_<%= rpnHeader.ClientID %> |
| { |
| position: relative; |
| } |
| </style> |
You can also take a look at this KB article which references the same issue. It is a problem in RadSplitter on which we are working and will be fixed for one of the next updates of the control.
Please, let me know if you need further assistance.
Best regards,
Sophy
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Rei
Top achievements
Rank 1
Rank 1
answered on 18 Mar 2008, 01:49 AM
Thank you very much, the hack works just fine
Cheers,
Rei
Cheers,
Rei
0
Doug Beard
Top achievements
Rank 1
Rank 1
answered on 16 Oct 2009, 05:25 PM
I'm guessing this has yet to be solved in the current release.
I still experience an issue with regard to this.
I can not get the overflow of the radpane to properly detect the docks.
I still experience an issue with regard to this.
I can not get the overflow of the radpane to properly detect the docks.
0
Doug Beard
Top achievements
Rank 1
Rank 1
answered on 19 Oct 2009, 02:09 PM
anyone?
My splitter and docks are contained in a UserControl. The RadPane within the splitter, in which the zone is located, does not properly contain the dock. It always flows right out of the bottom of the splitter.
The hack provided will not work in my case because it is within a user control.
Styles with <%=%> code are not support in such an instance.
Any suggestions?
My splitter and docks are contained in a UserControl. The RadPane within the splitter, in which the zone is located, does not properly contain the dock. It always flows right out of the bottom of the splitter.
The hack provided will not work in my case because it is within a user control.
Styles with <%=%> code are not support in such an instance.
Any suggestions?
0
Jim
Top achievements
Rank 1
Rank 1
answered on 20 Oct 2009, 12:40 PM
I think that this is a bug with the IE6 and IE7 browsers.
You can hard-code the CSS styles specifically for the respective splitter and pane. For example in the following project the ClientID of the splitter is WebUserControl1_RadSplitter1 and the ClientID of the pane is RAD_SPLITTER_PANE_CONTENT_WebUserControl1_rpnHeader.
.aspx
.ascx
You can find the ClientID of the splitter using some dev-tools [like FireBug (for FF) or IE dev toolbar for IE browsers].
You can hard-code the CSS styles specifically for the respective splitter and pane. For example in the following project the ClientID of the splitter is WebUserControl1_RadSplitter1 and the ClientID of the pane is RAD_SPLITTER_PANE_CONTENT_WebUserControl1_rpnHeader.
.aspx
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %> |
| <!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" style="height: 100%; width: 100%"> |
| <head id="Head1" runat="server"> |
| <title>Untitled Page</title> |
| <telerik:RadScriptBlock runat="server"> |
| <style type="text/css"> |
| #RAD_SPLITTER_PANE_CONTENT_WebUserControl1_rpnHeader |
| { |
| position: relative; |
| } |
| #WebUserControl1_RadSplitter1 |
| { |
| position: relative; |
| } |
| </style> |
| </telerik:RadScriptBlock> |
| </head> |
| <body style="height: 100%; width: 100%"> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <uc1:WebUserControl ID="WebUserControl1" runat="server" /> |
| </form> |
| </body> |
| </html> |
.ascx
| <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" |
| Inherits="WebUserControl" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <telerik:RadSplitter BorderSize="0" ID="RadSplitter1" Width="90%" Height="100%" Orientation="Horizontal" |
| runat="server" Style="position: relative !important;"> |
| <telerik:RadPane ID="rpnHeader" Height="100%" Width="100%" runat="server" Scrolling="both" |
| Style="position: relative !important;"> |
| <table cellpadding="3" cellspacing="0" width="100%" border="0" height="100%"> |
| <tr valign="top"> |
| <td style="width: 25%; text-align: center"> |
| <telerik:RadDockZone ID="RadDockZone1" runat="server" BorderStyle="None"> |
| <telerik:RadDock ID="RadDock1" Width="100%" Height="100%" runat="server" Title="Email"> |
| <ContentTemplate> |
| <div style="padding: 3px"> |
| <table cellpadding="2" cellspacing="0" style="width: 100%;"> |
| <tr> |
| <td> |
| New Emails |
| </td> |
| <td align="right"> |
| 0 |
| </td> |
| </tr> |
| <tr> |
| <td> |
| New Emails |
| </td> |
| <td align="right"> |
| 0 |
| </td> |
| </tr> |
| <tr> |
| <td> |
| New Emails |
| </td> |
| <td align="right"> |
| 0 |
| </td> |
| </tr> |
| <tr> |
| <td> |
| New Emails |
| </td> |
| <td align="right"> |
| 0 |
| </td> |
| </tr> |
| </table> |
| </div> |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </td> |
| <td style="width: 50%; text-align: center"> |
| <telerik:RadDockZone ID="RadDockZone2" runat="server" BorderStyle="None"> |
| <telerik:RadDock ID="RadDock2" runat="server" Title="Schedule"> |
| <ContentTemplate> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| asdsadasd<p /> |
| </ContentTemplate> |
| </telerik:RadDock> |
| <telerik:RadDock ID="RadDock3" runat="server" Title="Hahaha"> |
| <ContentTemplate> |
| asdasdsad |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </td> |
| <td style="width: 25%; text-align: center"> |
| <telerik:RadDockZone ID="RadDockZone3" runat="server" BorderStyle="None"> |
| <telerik:RadDock ID="RadDock4" runat="server" Title="Hahaha"> |
| <ContentTemplate> |
| asdasdsad |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </td> |
| </tr> |
| </table> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
You can find the ClientID of the splitter using some dev-tools [like FireBug (for FF) or IE dev toolbar for IE browsers].