DatePicker Calendar and Clock icon scrolling issues in IE6

[Kya]

Hello,

I have a RadGrid, used for data entry that has a DatePicker column and a TimePicker column, each having the associated icon to click for the correct pop-up Picker.  There are several rows, so that the grid has to be scrolled vertically on occasion. When this is the case, the calendar and clock icons do not scroll correctly in IE6. See attached images of the grid scrolled up and scrolled down.

I am using the latest version of the ASP.NET AJAX controls: 2013.1.220.40

I have seen some older forum threads mention similar problems can be fixed by adding "position: relative" to the style of the container of the problem elements.  The icons are in RadGrid generated table cells with no class definition (second td in code below), so I'm not sure how to add the relative position style to that cell. I've tried setting position:relative for class rcCalPopup. I've tried setting position:relative for rcTable td. Neither worked. 

Could you please tell me how to fix the problem?

<table cellspacing="0" class="rcTable rcSingle" summary="Table holding date picker control for selection of dates." style="width:100%;">
                <caption style="display:none;">
                    RadDatePicker
                </caption><thead style="display:none;">
                    <tr>
                        <th scope="col"></th>
                    </tr>
                </thead><tbody>
                    <tr>
                        <td class="rcInputCell" style="width:100%;"><span id="ctl00_BC_G1_GD_ctl00_ctl06_RDIPDate_dateInput_wrapper" class="riSingle RadInput " style="display:block;width:100%;"><input id="ctl00_BC_G1_GD_ctl00_ctl06_RDIPDate_dateInput" name="ctl00$BC$G1$GD$ctl00$ctl06$RDIPDate$dateInput" class="riTextBox riEnabled" type="text" /><input id="ctl00_BC_G1_GD_ctl00_ctl06_RDIPDate_dateInput_ClientState" name="ctl00_BC_G1_GD_ctl00_ctl06_RDIPDate_dateInput_ClientState" type="hidden" /></span></td>
                        <td><a title="Open the calendar popup." href="#" id="ctl00_BC_G1_GD_ctl00_ctl06_RDIPDate_popupButton" class="rcCalPopup">Open the calendar popup.</a></td>
                    </tr>
                </tbody>
            </table>

[Eyup]

Hello Kya,

I guess that you have found out the well known position: relative bug in IE6/7. To fix it, you need to add style="position:relative" to any container in which erratic controls are located.

You can also try to disable the following property:

Copy Code

<telerik:RadDatePicker ... DateInput-EnableSingleInputRendering="false" > </telerik:RadDatePicker>

Hope this helps. Please give it a try and let me know about the result.

Regards,
Eyup
the Telerik team

[Kya]

Hello Eyup.

Please tell me how to add style="position:relative" to the container that controls the date picker controls in the RadGrid.  Also, I do not have a RadDatePicker definition of which I can disable the DateInput-EnableSingleInputRendering property.  How do I do this?
Here is my RadGrid aspx code:

<telerik:RadGrid
   ID="GD"
   runat="server"
   AutoGenerateColumns="False"
   GridLines="None"
   PageSize="20"
   AllowMultiRowEdit="true"
   onprerender="GRD_PreRender"
   onitemcommand="GRD_ItemCommand"
   onitemdatabound="GRD_ItemDataBound"
   height="400px"
   Width="958px"
    >
    <MasterTableView EditMode="InPlace" CommandItemSettings-AddNewRecordText="add new record" CommandItemDisplay="Bottom" TableLayout="Fixed" DataKeyNames="Date" >
        <CommandItemSettings ShowAddNewRecordButton="true" ShowRefreshButton="false" />
        <CommandItemTemplate>
            <asp:Button ID="AddNew" runat="server" CommandName="AddNew" Text="Add a Row" CausesValidation="false" />
            <asp:Button ID="SaveAll" runat="server" CommandName="SaveAll" Text="Save Readings" CausesValidation="false" OnClientClick="OnSave()" />
            <asp:Label ID="SaveConfirmation" runat="server" Text="" ForeColor="White" />
        </CommandItemTemplate>
    </MasterTableView>
    <ClientSettings>
        <Scrolling AllowScroll="true" />
    </ClientSettings>
</telerik:RadGrid>
<telerik:GridDateTimeColumnEditor runat="server" ID="TimeEditor" >
  <TextBoxStyle Width="100px" font-size="9pt" Font-Names="Arial, Tahoma, 'Lucida Grande', Verdana, helvetica, sans-serif"  />
</telerik:GridDateTimeColumnEditor>
<telerik:GridTextBoxColumnEditor runat="server" ID="MeterEditor" >
  <TextBoxStyle Width="50px" font-size="9pt" Font-Names="Arial, Tahoma, 'Lucida Grande', Verdana, helvetica, sans-serif"  />
</telerik:GridTextBoxColumnEditor>
<telerik:GridTextBoxColumnEditor runat="server" ID="StandardCommentsEditor">
  <TextBoxStyle Width="90px"  font-size="9pt" Font-Names="Arial, Tahoma, 'Lucida Grande', Verdana, helvetica, sans-serif" />
</telerik:GridTextBoxColumnEditor>
<telerik:GridDateTimeColumnEditor runat="server" ID="StandardDate">
  <TextBoxStyle Width="100px" />
</telerik:GridDateTimeColumnEditor>

And here is the code behind where I set the GridDateTimeColumn properties:

GD.MasterTableView.Columns.Clear();
foreach (GridColumn cl in GD.Columns) GD.Columns.Remove(cl);

       GridDateTimeColumn DateCol = new GridDateTimeColumn();
        GD.MasterTableView.Columns.Add(DateCol);
        DateCol.DataField = string.Format("Date");
        DateCol.HeaderText = "Date";
        DateCol.ConvertEmptyStringToNull = true;
        DateCol.ColumnEditorID = "StandardDate";
        DateCol.DataFormatString = "{0:dd/MM/yyyy}";
        DateCol.UniqueName = "Date";

        if (ReadOnly)
        {
            DateCol.HeaderStyle.Width = new Unit(90, UnitType.Pixel);
            DateCol.ItemStyle.Width = new Unit(90, UnitType.Pixel);
        }
        else
        {
            DateCol.HeaderStyle.Width = new Unit(110, UnitType.Pixel);
            DateCol.ItemStyle.Width = new Unit(110, UnitType.Pixel);
        }

            GridDateTimeColumn TimeCol = new GridDateTimeColumn();
            GD.MasterTableView.Columns.Add(TimeCol);
            TimeCol.DataField = string.Format("M{0}", ColumnCounter);
            TimeCol.HeaderText = "Time";
            TimeCol.DataType = typeof(DateTime);
            TimeCol.DataFormatString = "{0:t}";
            TimeCol.ConvertEmptyStringToNull = true;
            TimeCol.DataFormatString = "{0:t}";
            TimeCol.ColumnEditorID = "TimeEditor";
            TimeCol.PickerType = GridDateTimeColumnPickerType.TimePicker;
            TimeCol.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
            TimeCol.ItemStyle.Width = new Unit(120, UnitType.Pixel);
            TimeCol.HeaderStyle.Width = new Unit(120, UnitType.Pixel);

[Eyup]

Hello Kya,

In your case please try the following approach:

Copy Code

Copy Code

<style>
   .rgDataDiv
    {
        position: relative;
    }
</style>

That should do the trick. Please give it a try and let me know if it works for you.

All the best,
Eyup
the Telerik team

[Kya]

Yes, thank you.  This fixed the problem.