setting the width of a RadDateInput element

7 posts, 0 answers
  1. Bjarte Bore
    Bjarte  Bore avatar
    1 posts
    Member since:
    Apr 2010

    Posted 31 Jan 2011 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 01 Feb 2011 Link to this post

    Hello Bjarte,

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

    CSS:
    .riTextBox
       {
           width:500px !important;
       }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Johny
    Johny avatar
    9 posts
    Member since:
    Jul 2010

    Posted 17 Oct 2011 Link to this post

    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
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Oct 2011 Link to this post

    Hello Johny,

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

    CSS:
    .ritextstyle 
       {
           width:500px !important;
       }

    Thanks,
    Shinu.
  6. Jorge
    Jorge avatar
    17 posts
    Member since:
    Oct 2008

    Posted 05 Jul 2012 Link to this post

    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!
  7. Tatiana
    Tatiana avatar
    19 posts
    Member since:
    Nov 2008

    Posted 18 Jun 2014 in reply to Shinu Link to this post

    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,
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Jun 2014 in reply to Tatiana Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017