Trouble with raddock floating position

8 posts, 1 answers
  1. Eric
    Eric avatar
    9 posts
    Member since:
    Mar 2009

    Posted 10 Sep 2009 Link to this post

    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
  2. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 11 Sep 2009 Link to this post

    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.





  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Eric
    Eric avatar
    9 posts
    Member since:
    Mar 2009

    Posted 11 Sep 2009 Link to this post

    Hi Schlurk,

    thanks for your reply but it's not work. and now if i move the dock, it not go at 1,1 of the screen like before the modification.

    thanks for your help

    Eric
  5. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 11 Sep 2009 Link to this post

    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.


  6. Eric
    Eric avatar
    9 posts
    Member since:
    Mar 2009

    Posted 11 Sep 2009 Link to this post

    Hi,

    unfortunately it did not work. the same trouble occurs

    thanks for trying to help me.

    Eric
  7. Eric
    Eric avatar
    9 posts
    Member since:
    Mar 2009

    Posted 14 Sep 2009 Link to this post

    someone can help me with this please ?

    Thanks
  8. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 15 Sep 2009 Link to this post

    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.
  9. Eric
    Eric avatar
    9 posts
    Member since:
    Mar 2009

    Posted 15 Sep 2009 Link to this post

    thank you very much !

    this problem is solve !

    Eric
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017