Alignment Problem w/ RadDatePicker

[Jeremy]

Hi, 

I have this weird alignment problem for my datepickers - the calendar box is really off from the box. 

Attached is the code - I'm using the latest version of radcontrols that I'm aware of.

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="WebForm1.aspx.vb" Inherits="OcalaPlatformv2.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">

        .style19
        {
            color: #000000;
            height: 25px;
            width: 138px;
        }
        .style13
        {
            width: 173px;
        }

        .style8
        {
            color: #000000;
        }

        .style20
        {
            height: 25px;
            width: 138px;
        }
        .style16
        {
            width: 173px;
            height: 25px;
        }
        .rdfd_{position:absolute}div.RadPicker table.rcSingle .rcInputCell{padding-right:0}.rcSingle .riSingle{white-space:normal}.RadInput_Default{font:12px "segoe ui",arial,sans-serif}.riSingle{box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-khtml-box-sizing:border-box}.riSingle{position:relative;display:inline-block;white-space:nowrap;text-align:left}.RadInput{vertical-align:middle}.riSingle .riDisplay{box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-khtml-box-sizing:border-box}.riDisplay{position:absolute;padding:2px 0 3px 5px;border:0 solid transparent;border-width:1px 2px 0 1px;width:100%;height:100%;overflow:hidden;white-space:nowrap;text-align:left;cursor:default;margin-left:1px}.riSingle .riTextBox{box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-khtml-box-sizing:border-box}
        .style17
    {
        width: 404px;
    }
        </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <telerik:RadSplitter ID="RadSplitter1" Runat="server" Width="800px"
                Height="350px">
        <telerik:RadPane ID="RadPane1" Runat="server" Width="430px">
            <table style="width: 404px; font-size: small;">
                <tr>
                    <td class="style19" style="text-align: right">
                                Customer
                            </td>
                    <td class="style13">
                        <telerik:RadComboBox ID="radComboBoxCustomer" runat="server"
                                    AutoPostBack="true" CssClass="style8" Font-Size="X-Small"
                            Width="200px">
                        </telerik:RadComboBox>
                    </td>
                </tr>
                <tr>
                    <td class="style19" style="text-align: right">
                                Container Size
                            </td>
                    <td class="style13">
                        <telerik:RadComboBox ID="radComboBoxContainerBox" runat="server"
                                    AutoPostBack="True" CssClass="style8" Enabled="false"
                            Width="200px">
                        </telerik:RadComboBox>
                    </td>
                </tr>
                <tr class="style8">
                    <td style="text-align: right" class="style20">
                                Destination
                            </td>
                    <td class="style13">
                        <asp:Label ID="lblDestination" runat="server"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td class="style19" style="text-align: right">
                                Oceanfreight Method
                            </td>
                    <td class="style13">
                        <telerik:RadComboBox ID="radComboBoxOcnMethodBox" runat="server"
                                    AutoPostBack="True" CssClass="style8" Enabled="false"
                            Width="200px">
                        </telerik:RadComboBox>
                    </td>
                </tr>
                <tr class="style8">
                    <td style="text-align: right" class="style20">
                                Oceanfreight Cost
                            </td>
                    <td class="style13">
                        <asp:Label ID="lblOceanfreightCost" runat="server"></asp:Label>
                    </td>
                </tr>
                <tr class="style8">
                    <td style="text-align: right" class="style20">
                                Zip Code
                            </td>
                    <td class="style13">
                        <asp:Label ID="lblZipCode" runat="server"></asp:Label>
                    </td>
                </tr>
                <tr class="style8">
                    <td style="text-align: right" class="style20">
                                Trucking Company
                            </td>
                    <td class="style13">
                        <asp:Label ID="lbltrucker" runat="server" ForeColor="Black"></asp:Label>
                    </td>
                </tr>
                <tr class="style8">
                    <td class="style20" style="text-align: right">
                                Trucking Cost
                            </td>
                    <td class="style16">
                        <asp:Label ID="lblTruckingCost" runat="server"></asp:Label>
                    </td>
                </tr>
                <tr class="style8">
                    <td class="style20" style="text-align: right">
                                Analysis Date</td>
                    <td class="style16">
                        <telerik:RadDatePicker ID="radDateAnalysis" Runat="server">
                        </telerik:RadDatePicker>
                    </td>
                </tr>
                <tr class="style8">
                    <td class="style20" style="text-align: right">
                                Stage</td>
                    <td class="style16">
                        <telerik:RadComboBox ID="radComboBoxStage" runat="server" CssClass="style8"
                                    Enabled="false" Width="200px">
                        </telerik:RadComboBox>
                    </td>
                </tr>
                <tr class="style8">
                    <td style="text-align: right" class="style20">
                                Analysis Name</td>
                    <td class="style13">
                        <telerik:RadTextBox ID="txtAnalysisName" runat="server" Width="200px">
                        </telerik:RadTextBox>
                    </td>
                </tr>
            </table>
        </telerik:RadPane>
        <telerik:RadPane ID="QuotePane" Runat="server" Width="430px">
            <table class="style17">
                <tr>
                    <td>
                                SAP Quote No</td>
                    <td>
                        <telerik:RadTextBox ID="Box_SAPQuoteNo" Runat="server">
                        </telerik:RadTextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                                Valid For</td>
                    <td>
                        <telerik:RadNumericTextBox ID="Box_ValidFor" Runat="server"
                                    DataType="System.Int32">
                        </telerik:RadNumericTextBox>
                    </td>
                </tr>
            </table>
        </telerik:RadPane>
        <telerik:RadPane ID="CalcPane" Runat="server" Width="430px">
            <table class="style17">
                <tr>
                    <td>
                                Ocala SO Number</td>
                    <td>
                        <telerik:RadTextBox ID="Box_OcalaSONumber" Runat="server">
                        </telerik:RadTextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                                Customer Contracted Delivery Date</td>
                    <td>
                        <telerik:RadDatePicker ID="Box_CustomerDeliveryDate" Runat="server"
                                    Height="20px">
                            <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" runat="server"
                                        ViewSelectorText="x">
                            </Calendar>
                            <DateInput DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy" runat="server"
                                        EnableSingleInputRendering="True" Height="20px" LabelWidth="64px">
                            </DateInput>
                            <DatePopupButton HoverImageUrl="" ImageUrl="" />
                        </telerik:RadDatePicker>
                    </td>
                </tr>
                <tr>
                    <td>
                                Customer PO Date</td>
                    <td>
                        <telerik:RadDatePicker ID="Box_CustomerPODate" Runat="server" Height="20px">
                            <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" runat="server"
                                        ViewSelectorText="x">
                            </Calendar>
                            <DateInput DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy" runat="server"
                                        EnableSingleInputRendering="True" Height="20px" LabelWidth="64px">
                            </DateInput>
                            <DatePopupButton HoverImageUrl="" ImageUrl="" />
                        </telerik:RadDatePicker>
                    </td>
                </tr>
                <tr>
                    <td>
                                Cut Item</td>
                    <td>
                        <telerik:RadComboBox ID="Box_CutItem" Runat="server">
                        </telerik:RadComboBox>
                    </td>
                </tr>
                <tr>
                    <td>
                                Fill Item</td>
                    <td>
                        <telerik:RadComboBox ID="Box_FillItem" Runat="server">
                        </telerik:RadComboBox>
                    </td>
                </tr>
                <tr>
                    <td>
                                Port of Origin</td>
                    <td>
                        <telerik:RadComboBox ID="Box_PortofOrigin" Runat="server">
                        </telerik:RadComboBox>
                    </td>
                </tr>
                <tr>
                    <td>
                                Factory Requested Ship Date</td>
                    <td>
                        <telerik:RadDatePicker ID="Box_FactoryRequestedDate" Runat="server"
                                    Height="20px">
                            <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" runat="server"
                                    ViewSelectorText="x">
                            </Calendar>
                            <DateInput DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy" runat="server"
                                    EnableSingleInputRendering="True" Height="20px" LabelWidth="64px">
                            </DateInput>
                            <DatePopupButton HoverImageUrl="" ImageUrl="" />
                        </telerik:RadDatePicker>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                </tr>
            </table>
        </telerik:RadPane>
        <br />
    </telerik:RadSplitter>
</asp:Content>

[Tsvetina]

Hi Jeremy,

Try using the following CSS rule for fixing the problematic look:

* + html .rcSingle a.rcCalPopup
{
    position: static;
}

Greetings,
Tsvetina
the Telerik team

[Jeremy]

I'm sorry - I don't quite understand how to put this in.

I'm having problems w/ alignment across my whole project as well..

[Tsvetina]

Hello Jeremy,

I assume you have a .css file in your application that holds the styles applied accross your pages? If so, add the below rule to it. If not, create such file and register it in the pages where you encounter problems with the pickers.

Greetings,
Tsvetina
the Telerik team

[Jeremy]

Thanks Tsvetina,

I put it in my site.css file - but I'm still having alignment problems everywhere - please see attached screenshot.

[Tsvetina]

Hello Jeremy,

Try using the IE Developer tools (F12) to inspect the CSS rules applied to the picker and the popup button and see if the position: static is applied and also if modifying any of the styles improves the look of the controls.

Also, you could try your project with the beta of Q2 2012 as many rendering issues with the pickers have been addressed there.

Greetings,
Tsvetina
the Telerik team