Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > Calendar > How to Set Width for RadDateTimePickers with External CSS

Answered How to Set Width for RadDateTimePickers with External CSS

Feed from this thread
  • Answer Telerik Admin Master avatar

    Posted on Dec 22, 2009 (permalink)

    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

Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > Calendar > How to Set Width for RadDateTimePickers with External CSS