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

backcolor?!

6 Answers 125 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 26 Nov 2009, 09:54 AM
Hi,
I am trying to set the background colour of the raddock.

I am using BackColor="LightYellow" within the aspx file.
But this does not seem to change the color ?!

I am doing something stupi here?

Thanks
Mark

6 Answers, 1 is accepted

Sort by
0
Jeroen
Top achievements
Rank 2
answered on 27 Nov 2009, 10:59 AM
What about using this:

dock.BackColor = System.Drawing.Color.LightYellow;


0
Pero
Telerik team
answered on 27 Nov 2009, 03:39 PM
Hello Mark,

You can do this using CSS. The following code will set the background-color and the text color of the dock's content:

<style type="text/css">
    .rdMiddle .rdCenter
    {
        background-color: LightYellow !important;
    }
    .rdContent
    {
        color: Red !important;
    }
</style>


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.
0
PJ Melies
Top achievements
Rank 1
answered on 10 Dec 2009, 12:31 AM
I have a followup question. 
Setting the style as above gives me a dock with a thin, white border around the left, bottom and right of the colored content section.  How do I get the border to have the same color?  I looked at the source and it appears that the dock renders a 3 row table with 3 columns in each row.  The white "border" is actually the left and right columns of the middle row and the entire 3rd row.  I tried setting the style based on the classes used in these other cells but it doesn't work.
0
Pero
Telerik team
answered on 15 Dec 2009, 12:12 PM
Hello PJ Melies,

With Q3 2009 we have introduced an improved rendering of the Dock control that solves number of problems reported by customers (RoudnedCorners for example). That is why these table-cells contain images. If you apply background-color to the respective table cells, the color will not be seen, because of the images.

To make the "border" around the dock have the same color you should modify the image sprites so that they have the desired color. Here is a link to a help article explaining how this can be done.

If you don't plan to use rounded corners you might as well hide (display: none) the table cells shown in the project below.

<%@ 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">
<head id="Head1" runat="server">
    <style type="text/css">
        .rdMiddle .rdCenter
        {
            background-color: LightYellow !important;
        }
        .rdContent
        {
            color: Red !important;
        }
        .rdLeft, .rdRight, .rdBottom
        {
            display: none !important;
        }
        .RadDock
        {
            border: 1px solid #828282;
            border-top: none;
        }
        .rdCenter EM
        {
            padding-left: 5px !important;
        }
    </style>
</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" MinHeight="300px" Width="300px">
                <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title"
                    EnableRoundedCorners="true">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        CONTENT
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>


Sincerely yours,
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.
0
Julian
Top achievements
Rank 1
answered on 07 Jan 2010, 05:48 PM
Hi,
     I have a similar issue, attach is the screen shot. See how big the border is at the bottom. How can i make it small just like left and right it should be thin. So, background color should fill the bottom as well. I do NOT care about rounded corners.
    I side ote, why do i have to embed a div for background and the cssClass does not apply the background color to the radDock ( isn't it for the whole window ?). Thanks,

Regards,

Osman
0
Petio Petkov
Telerik team
answered on 08 Jan 2010, 11:58 AM
Hi Julian,

In case you want to manipulate the footer you should change the following css classes:

<style type="text/css">
        .RadDock .rdBottom,          /*(tr)Bottom row*/
        .RadDock .rdBottom .rdLeft,  /*(td)Bottom left corner*/
        .RadDock .rdBottom .rdCenter,/*(td)Bottom center bar*/ 
        .RadDock .rdBottom .rdRight  /*(td)Bottom right corner*/
        {
            height: 0px !important  
        
    </style>

If you want the dock to fit the content you shouldn't set its height explicitly.

In case you want to modify the content's background color you should modify the .rdContent class, e.g. as shown below:

.RadDock .rdContent
        {
            background-color:Red !important;    
        }

Let us know if you need further assistance or you have additional questions.

Regards,
Petio Petkov
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.
Tags
Dock
Asked by
Mark
Top achievements
Rank 1
Answers by
Jeroen
Top achievements
Rank 2
Pero
Telerik team
PJ Melies
Top achievements
Rank 1
Julian
Top achievements
Rank 1
Petio Petkov
Telerik team
Share this question
or