6 Answers, 1 is accepted
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
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:
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.
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.
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
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.
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.
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">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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
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
Hi Julian,
In case you want to manipulate the footer you should change the following css classes:
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:
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.
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.