How to Set Width for RadDateTimePickers with External CSS

Thread is closed for posting
1 posts, 1 answers
  1. Answer
    Telerik Admin
    Telerik Admin avatar
    1679 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