RackDockZone is overlaying other controls!

8 posts, 0 answers
  1. Petrusilius
    Petrusilius avatar
    19 posts
    Member since:
    Apr 2007

    Posted 23 Aug 2007 Link to this post

    Hi I have splitted my Site in 2 parts on left side i got a raddockzone, on right side a treeview in the middle i got a split bar for collapsing. When i tell the raddockzone to have a height and width of 100%, then it's hiding the splitbar.

    Any solutions?
  2. Petya
    Admin
    Petya avatar
    869 posts

    Posted 23 Aug 2007 Link to this post

    Hello Petrusilius,

    Would it be possible for you to send us a simple running project that reproduces the issue you describe. We will work on it and try to provide suggestions to solve the problem. To attach files you need to open a support ticket as demonstrated in the instructions I am attaching.

    Best wishes,
    Petya
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Petrusilius
    Petrusilius avatar
    19 posts
    Member since:
    Apr 2007

    Posted 24 Aug 2007 Link to this post

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title>Untitled Page</title> 
        <style type="text/css"
            body {height: 100%; margin: 0; padding: 0;} 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
            <div> 
                <telerik:RadSplitter runat="server" ID="Splitter" Orientation="Vertical" Height="100%" Width="100%"
                    <telerik:RadPane runat="server" ID="LeftPane" Scrolling="None"
                        <telerik:RadDockZone runat="server" ID="DockZone" Height="100%" Width="100%" style="background:black"></telerik:RadDockZone> 
                    </telerik:RadPane> 
                    <telerik:RadSplitBar runat="server" ID="SplitBar" CollapseMode="Both"/> 
                    <telerik:RadPane runat="server" ID="RightPane"></telerik:RadPane> 
                </telerik:RadSplitter> 
            </div> 
        </form> 
    </body> 
    </html> 
    the problem occurs when you set a style in the raddockzone, if you delete the style everything is ok.
  4. Petya
    Admin
    Petya avatar
    869 posts

    Posted 24 Aug 2007 Link to this post

    Hello Petrusilius,

    Thank you for providing us with a code snippet. The Default RadDockZone applies a left padding of 5px. So, to fix your problem, please set
    style="background-color:Black;padding:0 0 0 0;"

    Hope this helps.

    Kind regards,
    Petya
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Petrusilius
    Petrusilius avatar
    19 posts
    Member since:
    Apr 2007

    Posted 24 Aug 2007 Link to this post

    if you now add a dock you get the same problem again.
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
    <%@ Register TagPrefix="RadSpl" Namespace="Telerik.WebControls" Assembly="RadSplitter.Net2" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title>Untitled Page</title> 
        <style type="text/css"
            body {height: 100%; margin: 0; padding: 0;} 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
            <div> 
                <telerik:RadSplitter runat="server" ID="Splitter" Orientation="Vertical" Height="100%" Width="100%"
                    <telerik:RadPane runat="server" ID="LeftPane" Scrolling="None"
                        <telerik:RadDockZone runat="server" ID="DockZone" Height="100%" Width="100%" style="background:black; padding: 0 0 0 0"
                            <telerik:RadDock runat="server" ID="Dock1"></telerik:RadDock> 
                        </telerik:RadDockZone> 
                    </telerik:RadPane> 
                    <telerik:RadSplitBar runat="server" ID="SplitBar" CollapseMode="Both"/> 
                    <telerik:RadPane runat="server" ID="RightPane"></telerik:RadPane> 
                </telerik:RadSplitter> 
            </div> 
        </form> 
    </body> 
    </html> 

  6. Petya
    Admin
    Petya avatar
    869 posts

    Posted 24 Aug 2007 Link to this post

    Hi Petrusilius,

    It seems to me that you have not correctly set up your project to use 100% dimensions for RadSplitter as described here. Here is a modification of your code that works as far as I tested:

    <head runat="server">
        <title>Untitled Page</title>
        <style type="text/css">             
        html, form, body
        {
            height:100%;
        }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:scriptmanager id="ScriptManager1" runat="server">
            </asp:scriptmanager>
         
                <telerik:radsplitter id="Splitter" runat="server" height="100%" orientation="Vertical"
                    width="100%">
                    <telerik:radpane id="LeftPane" runat="server" scrolling="None">
                        <telerik:RadDockZone runat="server" ID="DockZone" Height="100%" Width="100%" style="background:black; ">
                            <telerik:RadDock runat="server" ID="Dock1" ></telerik:RadDock>
                        </telerik:RadDockZone>
                    </telerik:RadPane>
                    <telerik:RadSplitBar runat="server" ID="SplitBar" CollapseMode="Both"/>
                    <telerik:radpane id="RightPane" runat="server" ></telerik:RadPane>
                </telerik:radsplitter>
         
        </form>
    </body>

    Let me know if this satisfies your requirements.

    All the best,
    Petya
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  7. Petrusilius
    Petrusilius avatar
    19 posts
    Member since:
    Apr 2007

    Posted 27 Aug 2007 Link to this post

    hmm I'm sorry but i cannot see the splitbar in your example at all...

    and i don't see any modification :( perhaps you copied the false one in?
  8. Petya
    Admin
    Petya avatar
    869 posts

    Posted 28 Aug 2007 Link to this post

    Hello Petrusilius,

    I am pasting a code that I hope works this time. However, it requires modifications of the Default skin (or the one you are using) to get the desired appearance. We will work on the matter in the future so that the code works directly without any skin's modifications.

    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"
        <title>Untitled Page</title> 
        <link href="../Skins/Default/Dock.Default.css" rel="stylesheet" type="text/css" /> 
        <style type="text/css">               
        html, form, body 
        { 
            height:100%; 
        }  
         
        .DockRadPane{position:relative;}                  
        </style> 
    </head> 
    <body scroll="no" style="margin: 0px"
        <form id="form1" runat="server"
            <asp:scriptmanager id="ScriptManager1" runat="server"
            </asp:scriptmanager> 
                <telerik:radsplitter id="Splitter" runat="server" height="100%" orientation="Vertical" 
                    width="100%">  
                    <telerik:radpane id="LeftPane" runat="server" cssclass="DockRadPane" scrolling="None">  
                        <telerik:RadDockZone runat="server" ID="DockZone" Height="100%" Width="100%" enableembeddedskins="false" skin="Default">  
                            <telerik:RadDock runat="server" ID="Dock1" enableembeddedskins="false" skin="Default"></telerik:RadDock>  
                        </telerik:RadDockZone>  
                     
                    </telerik:radpane>  
                    <telerik:RadSplitBar runat="server" ID="SplitBar" CollapseMode="Both"/>  
                    <telerik:radpane id="RightPane" runat="server" ></telerik:radpane>  
                </telerik:radsplitter> 
         
        </form> 
    </body> 
    </html> 

    Where I have modified Skins/[Used_skin]/Dock.[Used_Skin].css file - I have removed the border and padding from the .RadDockZone_Default and *>.RadDockZone_Default.rdVertical /* hidden from IE6 */ CSS classes. Truly hopes it works this time.


    Kind regards,
    Petya
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top