IE6/IE7 Datepicker absolute positioning issue

2 posts, 0 answers
  1. Ali Mohamad
    Ali Mohamad avatar
    15 posts
    Member since:
    Oct 2009

    Posted 15 Jun 2011 Link to this post


    I am running into an issue with the Calendar Datepicker control in IE6 and 7 and IE8/9 in compatibility mode, when the controls are drawn dynamically with absolute positioning.  The controls drop about 10px down from their intended position sometimes as soon as the screen draws and sometimes when the mouse hovers over the first datapicker control.  Below is an example of a test I built to demonstrate this behavior.
    Please note the DOCTYPE tag I am using for the page, and that the application is running ASP.Net 4.  I am using build 2011.1.413.40 of the Telerik.Web.UI assembly.

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Page3.aspx.vb" Inherits="ASPNET4Test1.Page3" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <head runat="server">
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <asp:Panel ID="Panel1" runat="server">

    Imports System.Data
    Imports System.Collections.Generic
    Imports Telerik.Web.UI
    Imports System.Linq
    Public Class Page3
        Inherits System.Web.UI.Page
        Private Sub Panel1_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Panel1.Init
                Dim _date3 As RadDatePicker = Nothing
                Dim oLabel As Label
                Dim _cal As RadCalendar = Nothing
                Dim _calAdded As Boolean = False
                Dim Pnl As System.Web.UI.WebControls.WebControl = Panel1
                Dim _posLeft As Integer = 80
                Dim _posLabelLeft As Integer = 20
                Dim _posTop As Integer
                For _tabIndex As Integer = 1 To 3
                    _posTop = _tabIndex * 20 + 20
                    If IsNothing(_cal) Then
                        _cal = New RadCalendar()
                        _cal.ID = "sharedcalendar"
                    End If
                    oLabel = New Label
                    oLabel.Style.Add("position", "absolute")
                    oLabel.Style.Add("top", String.Format("{0}px", (_posTop).ToString()))
                    oLabel.Style.Add("left", String.Format("{0}px", (_posLabelLeft).ToString()))
                    oLabel.Style.Add("width", String.Format("{0}px", (50).ToString()))
                    oLabel.Style.Add("height", String.Format("{0}px", (22).ToString()))
                    oLabel.Text = "Field " + _tabIndex.ToString()
                    oLabel.CssClass = "fls "
                    oLabel.EnableViewState = True
                    _date3 = New RadDatePicker()
                    _date3.ID = "dtp_" + _tabIndex.ToString()
                    _date3.Width = Unit.Pixel(60 + 15)  '+ 10   ' 87   
                    _date3.Height = Unit.Pixel(22 - 5)  ' - 13
                    _date3.TabIndex = _tabIndex
                    _date3.SharedCalendar = _cal
                    _date3.Style.Add("position", "absolute")
                    _date3.Style.Add("top", String.Format("{0}px", (_posTop).ToString()))
                    _date3.Style.Add("left", String.Format("{0}px", _posLeft.ToString()))   ' sCLeft)
                    _date3.Attributes.Add("fieldid", "fld" + _tabIndex.ToString())
                    _date3.Attributes.Add("fieldname", "fld" + _tabIndex.ToString())
                    _date3.Attributes.Add("fieldtype", "date")
                    _date3.Calendar.EnableNavigationAnimation = True
                    _date3.Culture = System.Globalization.CultureInfo.CurrentUICulture
                    _date3.MinDate = CDate("1900-1-1")
                    _date3.ShowPopupOnFocus = True
                    _date3.DatePopupButton.Visible = False
                    _date3.DateInput.EmptyMessage = System.Globalization.CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern.ToUpper()
                    _date3.DateInput.DateFormat = System.Globalization.CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern
                    _date3.DateInput.DisplayDateFormat = System.Globalization.CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern
                    _date3.DateInput.SelectionOnFocus = SelectionOnFocus.SelectAll
                    _date3.DateInput.ShowButton = False
                    _date3.DateInput.Width = Unit.Pixel(60)
                    _date3.DateInput.Height = Unit.Pixel(22 - 5)
            Catch ex As System.Exception
                Trace.Write(String.Format("Failed to draw fields. Exception: {0}", ex.ToString()))
                Trace.Write("End ---> Panel1_Init")
            End Try
        End Sub
    End Class

    Here is an image depicting the behavior I am experiencing this this page.

    Ali M.
  2. Galin
    Galin avatar
    526 posts

    Posted 20 Jun 2011 Link to this post

    Hello Ali Mohamad,

    The "jumping" of RadDatePicker is well known IE7 bug, and it is replicable without our Controls too. However you can fix it by adding Microsoft property zoom:1 to the RadInput:
    Copy Code

    I hope this helps. Additionally our system indicates that you have opened a support ticket concerning the same issue. In order to avoid duplicate posts, I suggest that we continue the communication in the support ticket.

    Kind regards,
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top