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

Trouble with raddock floating position

7 Answers 284 Views

Dock

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

Eric asked on 10 Sep 2009, 05:13 PM

hi,

i have a little problem positionning raddock in my scenario.

if i click on the image the raddock show but not at the right position, it's positionning at left = 1 and top = 1 but on a div. it's suppose to be on the screen a thought.

If you move the dock and close it, after that if you click again on the image the dock show a the right position on the screen and not on a div.

    
            <%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestFile.aspx.vb" Inherits="TestFile" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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 runat="server">  
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body  style="margin: 0px;  
        
                padding: 0px;  
        
                min-height: 100% !important; /*For all browser except IE */   
        
                height: auto !important;  
        
                height: 100%; /*IE hack since IE doesn't understand min-height */  
        
                background-position: center top;  
        
                width: 100%;  
        
                position: absolute;  
        
                top: 0px;  
        
                left: 0px;  
        
                background-image: url('./Images/background.gif');  
        
                background-repeat: repeat-y;"> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <div id="DivGlobal" style="padding: 0px;  
        
                width: 990px;  
        
                margin: 0px auto 0px auto;  
        
                position: relative;  
        
                background-color: #F9F9F9;  
        
                min-height: 100% !important; /*For all browser except IE */   
        
                height: auto !important;  
        
                height: 100%; /*IE hack since IE doesn't understand min-height */   " > 
        
                <div style="width: 690px;  
        
                min-height: 100% !important; /*For all browser except IE */   
        
                height: auto !important;  
        
                height: 100%; /*IE hack since IE doesn't understand min-height */  
        
                position: relative;  
        
                float: left;  
        
                padding: 0px;  
        
                margin: 0px;">                              
        
                        <div id="DivContent" style="padding: 0px;  
        
                margin: 0px;  
        
                width: 690px;  
        
                min-height: 100% !important; /*For all browser except IE */   
        
                height: auto !important;  
        
                height: 100%; /*IE hack since IE doesn't understand min-height */  
        
                background-color: #F9F9F9;  
        
                float: left;" > 
        
                            <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">  
        
                    <script type="text/javascript">  
        
                        function ShowDock5() {  
        
                            var dock = $find("<%=RadDock5.ClientID%>");  
        
                            var dockStyle = document.getElementById("<%= RadDock5.ClientID %>");  
        
                            dock.set_height(100);  
        
                            dock.set_width(100);  
        
                            dockStyle.style.left = 1 + "px";  
        
                            dockStyle.style.top = 1 + "px";  
        
                            dock.get_element().style.zIndex = 1999;  
        
                            dock.set_closed(false);  
        
                        }  
        
                    </script> 
        
                </telerik:RadCodeBlock> 
        
                <telerik:RadWindowManager ID="RadWindowManager1" runat="server">  
        
                </telerik:RadWindowManager> 
        
                <div style="background-color: #FFFFFF;  
        
                float: left;  
        
                min-height: 100% !important; /*For all browser except IE */   
        
                height: auto !important;  
        
                height: 100%; /*IE hack since IE doesn't understand min-height */  
        
                position: relative;  
        
                width: 825px;  
        
                padding: 0px;  
        
                margin: 0px;"> 
        
                <telerik:RadDock ID="RadDock5" runat="server" AutoPostBack="false"  Resizable="true" CloseText="Fermer" 
        
                    DockMode="Floating" DefaultCommands="Close" Height="1px" Width="1px" Top="1px" Left="1px"  >     
        
                    <ContentTemplate>   
        
                        <asp:Image ID="Image3" runat="server" /> 
        
                    </ContentTemplate>    
        
                </telerik:RadDock>   
        
                    <div id="imagePreviewPanel" style="display: block;">  
        
                                                    <asp:ImageButton ID="imagePreview" runat="server" ImageUrl="../../Images/Contenu/imagegallery/spacer.gif" Height="192px" 
        
                                                        Width="272px" AlternateText="Photo" BorderWidth="0"    
        
                                                        OnClientClick="ShowDock5(); return false;" 
        
                                                        /> 
        
                                                </div> 
        
                </div>      
        
                        </div>      
        
                    </div> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

code behind

    
            Imports System  
        
            Imports System.Net  
        
            Partial Class TestFile  
        
                Inherits System.Web.UI.Page  
        
                Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
        
                    RadDock5.Closed = True 
        
                End Sub  
        
            End Class

someone can help me to understand what's the problem ?

Thanks

Eric

7 Answers, 1 is accepted

answered on 11 Sep 2009, 05:01 PM

It would seem that dockStyle.Style.left/top you are actually adhering to the style inside of the <div> tag. Then when you move the dock around you are actually moving it outside of the <div> tags area so it will then refer to the entire page. Try to use the following:

    
                        function ShowDock5() 
        
                        {   
        
                            var dock = $find("<%=RadDock5.ClientID%>");   
        
                            var dockStyle = document.getElementById("<%= RadDock5.ClientID %>");   
        
                            dock.set_height(100);   
        
                            dock.set_width(100);   
        
                            dockStyle.set_left = 1;   
        
                            dockStyle.set_top = 1;   
        
                            dock.get_element().style.zIndex = 1999;   
        
                            dock.set_closed(false);   
        
                        }

I believe if you remove the .style and just do .set_left/top you will get the desired behavior. Check out this documentation article for more info.

answered on 11 Sep 2009, 08:29 PM

I just noticed something in your code, try defining your RadDock this way instead:

    
            <telerik:RadDock ID="RadDock5" runat="server" AutoPostBack="false"  Resizable="true" CloseText="Fermer"  
        
                    DockMode="Floating" DefaultCommands="Close" Height="1px" Width="1px">      
        
                    <ContentTemplate>    
        
                        <asp:Image ID="Image3" runat="server" />  
        
                    </ContentTemplate>     
        
                </telerik:RadDock>

You had defined in the control that Top="1px" and Left="1px". Removing this should help.

Accepted

answered on 15 Sep 2009, 01:57 PM

Hello Eric,

This is an expected behavior of the RadDock, because when it is loaded for the first time its parent HTML element is a <div> with position:relative and the dock is rendered with (top, left) relative to its parent element. After the dock is dragged (i.e. it changes its position) it becomes child to the <form> and it is rendered relative to the browser window. So, to overcome the problem we can simply make the dock's HTML element child to the <form> when the dock is shown (or when it is initialized). This is the modified ShowDock5() JavaScript method that makes the dock child to the <form>:

    
            <script type="text/javascript"> 
        
                function ShowDock5() 
        
                { 
        
                    var dock = $find("<%=RadDock5.ClientID%>"); 
        
                    var dockElement = dock.get_element(); 
        
                    ///make the dock element child to the <form> 
        
                    dock._form.appendChild(dockElement); 
        
                    dock.set_height(100); 
        
                    dock.set_width(100); 
        
                    ///Set Top and Left 
        
                    dock.set_top(1); 
        
                    dock.set_left(1); 
        
                    dockElement.style.zIndex = 1999; 
        
                    dock.set_closed(false); 
        
                }   
        
            </script>

Please try the code and let me know if you have problems.

Kind regards,
Pero
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.