Black top border on radDock??

6 posts, 0 answers
  1. Alec
    Alec avatar
    43 posts
    Member since:
    Mar 2009

    Posted 20 Aug 2009 Link to this post

    I recently upgraded Ajax Controls Toolkit to latest version and when I opened up my page which I used RadDock, the look and feel just changed. Now, a dock has a black top border which i donno where it came from. I opened up the source and it seems like there's this line:

    <div class="rdTopBorder"></div>
    <div class="rdBottomBorder"></div>
    <img id="ctl00_cphLeftColumn_1_radDock1" style="border-width: 0px;" src="../../library/Company/32/bb_mainbanner.jpg"/>
    ...

    How to change that?

  2.
  3. Alec
    Alec avatar
    43 posts
    Member since:
    Mar 2009

    Posted 20 Aug 2009 Link to this post

    Actually the black border appears around the dock. So, another words, each dock now has a black border. How do I disable the border.

    Also, I used to be able to mousehover the dock's title and drag things. But now, when I mouse hover the title, the cursor just does nothing. I have to mouse hover the border in order for the cursor to pick up the dock and drag.
  5. Sebastian Piu
    Sebastian Piu avatar
    1 posts
    Member since:
    Aug 2009

    Posted 21 Aug 2009 Link to this post

    I'm experiencing the same issue that Alec reports; since the last upgrade the docks have a black border around them. Seems that there were changes to the CSS ?
    Is there any upgrade guide or any pointers on how to get the same look and feel that the previous version had?

    Regards,
    Sebastian
  7. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 24 Aug 2009 Link to this post

    Hi,

    Regarding the questions:
    • This should not happen after an upgrade to the latest version.

      To remove the borders that surround the RadDock control, all of the CSS classes that style the dock's borders have to be overriden. Here is a source code that will make the borders disappear to all of the RadDocks present on the page:

      <head> 
      <style id="Style1" type="text/css" runat="server"> 
          .rdSideBorders, .rdTopBorder, .rdBottomBorder, .rdTitlebar 
          { 
              border: 0 !important; 
          } 
      </style> 
      </head> 

      In case this does not meet your requirements, please send us a simple running project where we can observe this behavior of the RadDock control. 
    • Regarding the issue with the mouse cursor - everything seems to be working fine. You can see this on our online demos. Again, we need more information about the problem in order to offer an adequate solution. 

    Also, some screen-shots of how the borders and the cursor looked before and after the upgrade would be of help.  


    Sincerely yours,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  9. Alec
    Alec avatar
    43 posts
    Member since:
    Mar 2009

    Posted 24 Aug 2009 Link to this post

    Thanks.

    The second problem is, my dock cannot be dragged because i have to use css to hide the contain inside the raddock

    e.g.

    .contentlibrary .radDock img{
            display:none;
    }

    This is so that my list of docks only show their titles and when i click on a dock, i can just drag into another area and it is in that area that the image will show up.

    It used to work, but since I upgraded to the latest version, the title bar of the raddock is no longer draggable. I have to display the image (raddock's content) in order to drag a dock. The curson only changed to draggable in the dock's content or the dock's border. If i mouse hover the title bar, the cursor does nothing.

    Is there any work around?
  11. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 27 Aug 2009 Link to this post

    Hi Alec,

    I followed your steps exactly and created a sample project, but still cannot reproduce your problem. Here is what I am doing:
    1. I placed an image inside the RadDock's content container and set its display:attribute to none.
    2. The EnableDrag property of the RadDock is set to false and the RadDock is collapsed.
    3. When the titlebar is clicked the dock dragging is enabled and the dock can be dragged by its titlebar. 
    4. I drag the dock from its original zone and drop it onto a new zone where I show the image and expand the RadDock.
    The source code of the project is pasted below. Please modify it so that the errors are reproduced and sent it back. Once I can reproduce the problem it would be much easier to resolve the issue.

    <%@ 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 id="Head1" runat="server"> 
        <title></title> 
        <style type="text/css"> 
            img 
            { 
                display: none; 
            } 
        </style> 
     
        <script type="text/javascript"> 
            function dockInitialize(dock, args) 
            { 
                var dockElement = dock.get_element(); 
     
                if ($telerik.isIE) 
                { 
                    dockElement.attachEvent('onclick', SetHandle); 
                } 
                else 
                { 
                    dockElement.addEventListener('click', SetHandle, false); 
                } 
     
            } 
            function SetHandle() 
            { 
                var dock = $find("RadDock1"); 
                var dockElement = dock.get_element(); 
     
                //enable drag 
                dock.set_enableDrag(true); 
     
                if ($telerik.isIE) 
                { 
                    dockElement.detachEvent('onclick', SetHandle); 
                } 
                else 
                { 
                    dockElement.removeEventListener('click', SetHandle, false); 
                } 
            } 
     
            function OnDragEnd(dock, args) 
            { 
                if (dock.get_dockZoneID() == "RadDockZone2") 
                { 
                    dock.set_collapsed(false); 
                    var image = $get("dockDrag"); 
                    image.style.display = "block"; 
                } 
            } 
        </script> 
     
    </head> 
    <body> 
        <form id="form1" runat="server"> 
        <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        </asp:ScriptManager> 
        <div> 
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> 
                <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px"> 
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Height="100px" Title="RadDock-Title" 
                        OnClientInitialize="dockInitialize" EnableDrag="false" Collapsed="true" OnClientDragEnd="OnDragEnd"> 
                        <ContentTemplate> 
                            <img id="dockDrag" src="http://demos.telerik.com/aspnet-ajax/dock/examples/setdraghandleclientside/Img/drag.gif" 
                                alt="dockDrag" /> 
                        </ContentTemplate> 
                    </telerik:RadDock> 
                </telerik:RadDockZone> 
                <telerik:RadDockZone ID="RadDockZone2" runat="server" Height="300px" Width="300px"> 
                </telerik:RadDockZone> 
            </telerik:RadDockLayout> 
        </div> 
        </form> 
    </body> 
    </html> 



    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.
Back to Top