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

original border still displays

1 Answer 50 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Adam King
Top achievements
Rank 1
Adam King asked on 16 May 2011, 08:51 PM
Is there a way to replace the dock border rather than add another visible one ?

I have set some border properties of the radDock, so I see my darker/thicker/colored border all around the dock
BUT I also see a light gray line bottom border just inside my border.
See picture

1 Answer, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 18 May 2011, 01:44 PM
Hi Adam,

Setting RadDock's border through properties is not supported. In fact the RadDock's border is not a CSS border, but a background image on an HTML element. If you want to remove it you must use custom CSS.
The following CSS will remove the default borders on all docks on the page, and will set solid red border 2px wide:
<!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">
        /* Remove border on all docks */
        .RadDock .rdTop .rdLeft,
        .RadDock .rdTop .rdRight,
        .RadDock .rdMiddle .rdLeft,
        .RadDock .rdMiddle .rdRight,
        .RadDock .rdBottom .rdLeft,
        .RadDock .rdBottom .rdRight,
        .RadDock .rdBottom .rdCenter
        {
            display: none !important;
        }
        .RadDock .rdTop .rdLeft,
        .RadDock .rdTop .rdRight,
        .RadDock .rdTop .rdCenter
        {
            height: 26px !important;
        }
         
        .RadDock .rdTop .rdCenter
        {
            background-position: 0px -28px !important;
        }
        .RadDock .rdTitleBar em
        {
            line-height: 26px !important;
        }
        div.RadDock.rdCollapsed
        {
            height: 26px !important;
        }
         
        /* Set border to dock */
        .RadDock
        {
            border: 2px solid Red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="RadScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px">
                    <ContentTemplate>
                        Dock's Content
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>


Best wishes,
Pero
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.

Tags
Dock
Asked by
Adam King
Top achievements
Rank 1
Answers by
Pero
Telerik team
Share this question
or