Rad Dock background

3 posts, 1 answers
  1. Clark
    Clark avatar
    26 posts
    Member since:
    Jan 2011

    Posted 27 Jan 2011 Link to this post

    Is it possible to set the rad dock background to transparent? I tried this

    <telerik:RadDock ID="RadDock2" Runat="server" BackColor="Transparent"  EnableAnimation="true" DockHandle="Grip" Width="195px">


    and it did not work.

    Thanks!
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 28 Jan 2011 Link to this post

    Hello Clark,

    In order to achieve transparent background color, you should use a little piece of CSS overwrites for the Dock. If you set a transparent background to the Dock content you should also remove the side Dock backgrounds that comes from the sprite image and to set some borders also:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            /* this will remove the unwanted cells */
            .rdTop .rdLeft,
            .rdTop .rdRight,
            .rdMiddle .rdLeft,
            .rdMiddle .rdRight,
            .rdBottom
            {
                display: none;
            }
             
            /* put the necessary border as the image border from the sprite was removed when the left and right cells were disabled */
            .rdTop .rdCenter,
            .rdMiddle .rdCenter
            {
                border-left: 1px solid #9eb6ce !important;
                border-right: 1px solid #9eb6ce !important;
            }
             
            .rdMiddle .rdCenter
            {
                border-bottom: 1px solid #9eb6ce !important;
            }
             
            /* Setting transparent backgroudn to Dock content */
            .RadDock table.rdTable tr.rdMiddle td.rdCenter
            {
                background-color: transparent;
            }
        </style>
    </head>
    <body style="background-color: #f00;">
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadDock ID="RadDock1" runat="server" Title="Dock 1" Skin="Office2007" Top="40"
            Left="40" BackColor="Transparent" EnableAnimation="true" DockHandle="Grip" Width="195px">
            <ContentTemplate>
                <div>
                    This is dock 1<br />
                    This is dock 1<br />
                    This is dock 1<br />
                    This is dock 1<br />
                    This is dock 1<br />
                    This is dock 1<br />
                    This is dock 1<br />
                </div>
            </ContentTemplate>
        </telerik:RadDock>
        </form>
    </body>
    </html>


    Greetings,
    Bojo
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Clark
    Clark avatar
    26 posts
    Member since:
    Jan 2011

    Posted 28 Jan 2011 Link to this post

    Thanks for the quick reply, that did the trick!

Back to Top