This is a migrated thread and some comments may be shown as answers.

Alignment Problem w/ RadDatePicker

5 Answers 154 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Jeremy
Top achievements
Rank 1
Jeremy asked on 17 May 2012, 03:25 AM
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>

5 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 22 May 2012, 09:05 AM
Hi Jeremy,

Try using the following CSS rule for fixing the problematic look:
* + html .rcSingle a.rcCalPopup
{
    position: static;
}


Greetings,
Tsvetina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Jeremy
Top achievements
Rank 1
answered on 29 May 2012, 07:20 AM
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..

0
Tsvetina
Telerik team
answered on 29 May 2012, 07:33 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Jeremy
Top achievements
Rank 1
answered on 29 May 2012, 07:53 AM
Thanks Tsvetina,

I put it in my site.css file - but I'm still having alignment problems everywhere - please see attached screenshot.
0
Tsvetina
Telerik team
answered on 29 May 2012, 08:30 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Calendar
Asked by
Jeremy
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Jeremy
Top achievements
Rank 1
Share this question
or