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

Rad Dock background

2 Answers 89 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Clark
Top achievements
Rank 1
Clark asked on 27 Jan 2011, 11:29 PM
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 Answers, 1 is accepted

Sort by
0
Accepted
Bozhidar
Telerik team
answered on 28 Jan 2011, 09:05 AM
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.
0
Clark
Top achievements
Rank 1
answered on 28 Jan 2011, 03:20 PM
Thanks for the quick reply, that did the trick!

Tags
Dock
Asked by
Clark
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Clark
Top achievements
Rank 1
Share this question
or