6 Answers, 1 is accepted
RadDatePicker uses an inline width style. In order to override it, you need to use !important in your external CSS rule.
As for the font-size, using !important is not necessary, however, you have to be aware of the notion of CSS specificity:
http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx
Greetings,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 1
Thanks for your reply. I can now get it working with the width but the font-size is unchanged. All I want to do is standardise the RadDatePicker controls on my page. I've given them all a class called rdpStandard and this is what my CSS looks like:
.rdpStandard
{
width: 100px !important;
font-size: 10px !important;
}
I know you said !important was not necessary for the font-size but I thought I'd try it anyway. I read your article on CSS specificity. It was very interesting but even applying the style using the form
div.rdpStandard
{
width: 100px;
font-size: 10px;
}
I get the same result - the width is applied but the font-size isn't.
Do you have any ideas how to fix this?
Thanks
Colin
If the rdpStandard CSS class is applied to the RadDatePicker wrapper, then the font-size style should be defined like this:
.rdpStandard .RadInput .riTextBox
{
font-size: 10px ;
}
(The riTextBox CSS class exists in Q1 2009 and later versions)
Currently you are trying to define the font size for the wrapper, which will not work, because the RadInput skin defines font styles for the date input textbox.
Greetings,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 1
but it has not worked
I am using font color Red to identify if I have the control right so that the alignment can be set
/* Textbox text region */
.RadPicker_Default
.RadInput
.RadPicker_Default
.riTextBox
.RadPicker_Default
.RadInput .riTextBox
.RadPicker_Default
.riTextBox .riHover
.RadPicker_Default
.riTextBox .riFocused
.RadPicker_Default
.riTextBox .riEmpty
.RadPicker_Default
.riTextBox .riTextBox riEnabled
{
text-align:right;
/*------*/
font-family:Tahoma,Verdana,sans-serif;
font-size:12px;
font-style:normal;
text-decoration: none;
color:Red !important;
/*-------*/
}
This CSS rule will not work, because it contains an invalid selector. There are no commas in it, hence the resulting selector does not match any elements on the page.
| <%@ Page Language="C#" %> |
| <%@ 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 runat="server"> |
| <meta http-equiv="content-type" content="text/html;charset=utf-8" /> |
| <title>RadControls for ASP.NET AJAX</title> |
| <style type="text/css"> |
| .RadPicker .RadInput .riTextBox |
| { |
| text-align:right; |
| color:red; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadDatePicker ID="RadDatePicker1" runat="server" SelectedDate="2009/1/1" /> |
| </form> |
| </body> |
| </html> |
Regards,
Dimo
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.
Rank 1
My oversight
/* Textbox text region */
.RadPicker_Default .RadInput,
.RadPicker_Default .riTextBox,
.RadPicker_Default .RadInput .riTextBox ,
.RadPicker_Default .riTextBox .riHover,
.RadPicker_Default .riTextBox .riFocused ,
.RadPicker_Default .riTextBox .riEmpty,
.RadPicker_Default .riTextBox .riTextBox riEnabled
{
text-align:right;
/*------*/
font-family:Tahoma,Verdana,sans-serif;
font-size:12px;
font-style:normal;
text-decoration: none;
color:Red !important;
/*-------*/
}