Alignment Problem w/ RadDatePicker

6 posts, 0 answers
  1. Jeremy
    Jeremy avatar
    6 posts
    Member since:
    Feb 2012

    Posted 16 May 2012 Link to this post

    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>
  2. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 22 May 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jeremy
    Jeremy avatar
    6 posts
    Member since:
    Feb 2012

    Posted 29 May 2012 Link to this post

    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..

  5. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 29 May 2012 Link to this post

    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.
  6. Jeremy
    Jeremy avatar
    6 posts
    Member since:
    Feb 2012

    Posted 29 May 2012 Link to this post

    Thanks Tsvetina,

    I put it in my site.css file - but I'm still having alignment problems everywhere - please see attached screenshot.
  7. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 29 May 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017