Dock not contained properly inside Splitter Pane (IE only)

6 posts, 1 answers
  1. Rei
    Rei avatar
    6 posts
    Member since:
    Oct 2007

    Posted 17 Mar 2008 Link to this post

    <%@ 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</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                            asdsadasd</> 
                                        </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.


  2. Answer
    Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 17 Mar 2008 Link to this post

    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:

    <style type="text/css">     
    .pane     
    {     
        positionrelative;       
    }      
    #RAD_SPLITTER_PANE_CONTENT_<%= rpnHeader.ClientID %>          
    {         
       positionrelative;         
    }      
    </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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rei
    Rei avatar
    6 posts
    Member since:
    Oct 2007

    Posted 17 Mar 2008 Link to this post

    Thank you very much, the hack works just fine

    Cheers,
    Rei
  5. Doug Beard
    Doug Beard avatar
    55 posts
    Member since:
    Sep 2009

    Posted 16 Oct 2009 Link to this post

    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.
  6. Doug Beard
    Doug Beard avatar
    55 posts
    Member since:
    Sep 2009

    Posted 19 Oct 2009 Link to this post

    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?
  7. Jim
    Jim avatar
    31 posts
    Member since:
    Jun 2009

    Posted 20 Oct 2009 Link to this post

    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
    <%@ 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</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                    asdsadasd</> 
                                </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].
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017