setting the width of a RadDateInput element

[Bjarte Bore]

I'm trying to set the width of a RadDateInput, but nothing I do seems to affect the width of the input element (it always renders at width: 100%).
I'v tried these methods:

DateInput.Width =  Unit.Pixel(60);
DateInput.Attributes.CssStyle.Add("width", "60px");
DateInput.EnabledStyle.Width = Unit.Pixel(60);

Is there any correct way to set the width of this element?

-Bjarte

[Shinu]

Hello Bjarte,

You can achieve this by overriding the default CSS like below.

CSS:

.riTextBox
   {
       width:500px !important;
   }

Thanks,
Shinu.

[Johny]

this is a little bit stupid way. 1) it changes width for all radInputs on the Page... 2) Span that contains RadDateInput will still have 150pixels and you will get all controls moved to right from RadDateInput with an empty span of space that you don't want

[Shinu]

Hello Johny,

You can add the following custom CssClass to set the width of a particular RadDateInput.

CSS:

.ritextstyle
   {
       width:500px !important;
   }

Thanks,
Shinu.

[Jorge]

Johny,
I entirely agree with you. We got a big kick out of your comment. Right on man!

The first suggestion indeed causes the unintended formatting of controls which are not related to the issue. The second suggestion forces you to create a needless class and you still have to touch every Date Picker.

However misguided, Shinu's suggestion did point me in a direction where I got the issue solved. I just had to be more specific in my class assignment. Here is how I got it to work:

.RadPicker .riTextBox {
    width: 60px !important;
}

That way I insure that only riTextBoxes which are within the hierarchy of a RadPicker will apply the style.

On another note, there is another annoyance of the RadDatePicker control which has not been addressed by Telerik in many years, despite the large volume of online complaints from people who would much rather not have such a default feature... The annoyance has to do with the calendar showing a week-of-the-year row header by default.
I have found countless blogs and forums where developers want to know how to turn that "feature" off, and the suggested solution from Telerik is still the same: Add a ShowRowHeaders="false" parameter to each control you want to behave as a normal calendar.

What if you have hundreds of them? What if you miss one? How about Telerik changing the default to "false" and only turn it on when needed, which by my estimation should be the exception?

Well, while Telerik keeps thinking about it, here is how you can solve that from one central place... Create a skin file with the required parameter in your .Net Theme folder. Note: Don't confuse this with Telerik's concept of skins, which is a different interpretation of the ASP.Net skin standard. I'm talking about a single file with the extension "skin."  In my case, I called it Telerik.skin and it includes the following code:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<telerik:RadDatePicker runat="server">
    <Calendar ShowRowHeaders="false"></Calendar>
</telerik:RadDatePicker>

I just placed the file inside App_Themes\Default, which is the default theme for the application, and that's it. All the DatePickers now automatically behave like a normal calendar.

I hope this helps someone out there.  Cheers!

[Tatiana]

Hi,

I am using Q3 2013 version.

My question is why I need to override the default CSS and cannot just use the Width properties. Is it the bug that will be fixed?

Thank you,

[Shinu]

Hi Tatiana,

Please try to set the width to the RadDatePicker not to the DateInput. Because the widths for the nested DateInputs are Ignored. If you want to change only the width of the DateInput not the entire control then you have to override the CSS calss, this is the defult behavior of the control.

Thanks,
Shinu.