This is a migrated thread and some comments may be shown as answers.

RackDockZone is overlaying other controls!

7 Answers 111 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Petrusilius
Top achievements
Rank 1
Petrusilius asked on 23 Aug 2007, 01:53 PM
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?

7 Answers, 1 is accepted

Sort by
0
Petya
Telerik team
answered on 23 Aug 2007, 02:13 PM
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
0
Petrusilius
Top achievements
Rank 1
answered on 24 Aug 2007, 08:05 AM
<!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.
0
Petya
Telerik team
answered on 24 Aug 2007, 12:32 PM
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
0
Petrusilius
Top achievements
Rank 1
answered on 24 Aug 2007, 12:55 PM
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> 

0
Petya
Telerik team
answered on 24 Aug 2007, 01:16 PM
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
0
Petrusilius
Top achievements
Rank 1
answered on 27 Aug 2007, 07:44 AM
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?
0
Petya
Telerik team
answered on 28 Aug 2007, 09:01 AM
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
Tags
Dock
Asked by
Petrusilius
Top achievements
Rank 1
Answers by
Petya
Telerik team
Petrusilius
Top achievements
Rank 1
Share this question
or