RadDock styling question

2 posts, 0 answers
  1. Huib
    Huib avatar
    3 posts
    Member since:
    Jan 2009

    Posted 04 May 2009 Link to this post

    I have created a custom css-style for RadDocks. The only thing I cannot style at the moment is the border around the dropzone when RadDoscks are dragged. I used HighlightedCssClass to get a hatch pattern like this:

     

    <style type="text/css">
    .DockZoneSelectie {
    background-color: #FFC272 !important;
    }
    .rdPlaceHolder {
    background-color: #FFD7A3 !important;
    background: url(images/hatch.gif) repeat;
    }
    </style> 
     
    That works fine, however I cannot control the border around the dropzone, this dropzone is 2 pixels too wide so the border will be clipped when DockZones are next too each other. A screendump can be seen here here. I based my custom style on the default RadDock style but there is no style to be found there that sets the border. Also I used radDock.EnableEmbeddedBaseStylesheet = false; radDock.EnableEmbeddedSkins = false; to disable embedded skins. How do I get access to the border style of the highlighted area when docks are dragged?

  2. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 05 May 2009 Link to this post

    Hello Huib,

    You should set a smaller width to the  rdPlaceHolder class and everything will be fine, e.g.

    <%@ 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">  
            .DockZoneSelectie  
            {  
                background-color: #FFC272 !important;  
                  
            }  
            .rdPlaceHolder  
            {  
                background-color: #FFD7A3 !important;  
                border: solid 5px red !important;  
                width: 97% !important;  
            }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <div> 
            <asp:ScriptManager ID="ScriptManager1" runat="server">  
            </asp:ScriptManager> 
            <telerik:RadDockZone ID="RadDockZone1" runat="server" HighlightedCssClass="DockZoneSelectie" Width="300px">  
                <telerik:RadDock ID="RadDock1" runat="server" Text="RadDock1" Title="RadDock1"/>  
            </telerik:RadDockZone> 
            <telerik:RadDockZone ID="RadDockZone2" runat="server"  HighlightedCssClass="DockZoneSelectie" Width="300px">  
                <telerik:RadDock ID="RadDock2" runat="server" Text="RadDock2" Title="RadDock2"/>  
            </telerik:RadDockZone> 
        </div> 
        </form> 
    </body> 
    </html> 
     

    Let us know if you have any other questions.

    Sincerely yours,
    Petio Petkov
    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.
Back to Top