backcolor?!

7 posts, 0 answers
  1. Mark
    Mark avatar
    132 posts
    Member since:
    Feb 2008

    Posted 26 Nov 2009 Link to this post

    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
  3. Jeroen
    Jeroen avatar
    9 posts
    Member since:
    Feb 2006

    Posted 27 Nov 2009 Link to this post

    What about using this:

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


  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 27 Nov 2009 Link to this post

    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.
  7. PJ Melies
    PJ Melies avatar
    30 posts
    Member since:
    Sep 2008

    Posted 09 Dec 2009 Link to this post

    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.
  9. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 15 Dec 2009 Link to this post

    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.
  11. Julian
    Julian avatar
    1 posts
    Member since:
    May 2009

    Posted 07 Jan 2010 Link to this post

    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
  13. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 08 Jan 2010 Link to this post

    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.
Back to Top