How to Set Width for RadDateTimePickers with External CSS

Thread is closed for posting
1 posts, 1 answers
  1. Answer
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 22 Dec 2009 Link to this post

    Requirements
    RadControls for ASP .NET AJAX version

    2009.1.311 and later
    .NET version

    2.0 and later
    Visual Studio version

    2005 and later
    Programming language None
    Browser support

    all browsers supported by RadControls for ASP .NET AJAX


    PROJECT DESCRIPTION

    Due to its specific HTML rendering, RadDatePickers and RadTimePickers always have an explicit width set as an inline style. In some cases it may be more convenient to manage the controls' widths with external CSS code. Usually an additional CSS class is used to target the control(s). In order to override the inline width style, the !important CSS setting should be used. Here is an example:

    <%@ 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>Setting RadDateTimePicker's Width with External CSS styles</title> 
    <style type="text/css"> 
     
    .PickerCssWidth, 
    .PickerCssWidth .rcTable 
    { 
        width:400px !important; 
    } 
     
    .PickerNoButtonsCssWidth .riTextBox 
    { 
        width:300px !important; 
    } 
     
    .PickersContainer .RadPicker, 
    .PickersContainer .RadPicker .rcTable 
    { 
        width:250px !important; 
    } 
     
    </style> 
    </head> 
    <body> 
    <form id="form1" runat="server"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
    <h1>Setting RadDateTimePicker's Width with External CSS styles</h1> 
     
    <h2>Popup Buttons Are Visible</h2> 
     
    400px <telerik:RadDatePicker ID="RadDatePicker1" runat="server" CssClass="PickerCssWidth"> 
        <DateInput runat="server" ShouldResetWidthInPixels="false" /> 
    </telerik:RadDatePicker> 
     
    <br /><br /> 
     
    400px <telerik:RadTimePicker ID="RadTimePicker1" runat="server" CssClass="PickerCssWidth"> 
        <DateInput runat="server" ShouldResetWidthInPixels="false" /> 
    </telerik:RadTimePicker> 
     
    <br /><br /> 
     
    400px <telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server" CssClass="PickerCssWidth"> 
        <DateInput runat="server" ShouldResetWidthInPixels="false" /> 
    </telerik:RadDateTimePicker> 
     
    <br /><br /> 
     
    <h2>Popup Buttons Are Not Visible</h2> 
     
    300px <telerik:RadDateTimePicker ID="RadDateTimePicker2" runat="server" CssClass="PickerNoButtonsCssWidth"> 
        <DateInput runat="server" ShouldResetWidthInPixels="false" /> 
        <DatePopupButton Visible="false" /> 
        <TimePopupButton Visible="false" /> 
    </telerik:RadDateTimePicker> 
     
    <h2>Setting Width to Numerous Pickers in a Common Container</h2> 
     
    <p>(250px)</p> 
     
    <div class="PickersContainer"> 
        <telerik:RadDateTimePicker ID="RadDateTimePicker3" runat="server"> 
            <DateInput runat="server" ShouldResetWidthInPixels="false" /> 
        </telerik:RadDateTimePicker> 
        <br /><br /> 
        <telerik:RadDateTimePicker ID="RadDateTimePicker4" runat="server"> 
            <DateInput ID="DateInput1" runat="server" ShouldResetWidthInPixels="false" /> 
        </telerik:RadDateTimePicker> 
        <br /><br /> 
        <telerik:RadDateTimePicker ID="RadDateTimePicker5" runat="server"> 
            <DateInput ID="DateInput2" runat="server" ShouldResetWidthInPixels="false" /> 
        </telerik:RadDateTimePicker> 
    </div> 
     
    </form> 
    </body> 
    </html> 
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.