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

DatePicker Scrolling Issue in IE8

7 Answers 156 Views

Calendar

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

7 Answers, 1 is accepted

Accepted

answered on 07 Sep 2010, 10:18 AM

Hello Ken,

This looks like a known IE bug related to positioned elements and scrollable containers. Please try adding a position:relative CSS style to the scrollable container in your scenario. If this does not help, please send us a simple standalone demo.

By the way, this problem should not occur in the latest RadControls versions, because the DatePicker popup buttons no longer use position:relative in IE (unless you are adding such styles to <a> elements globally in some way).

Best wishes,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Accepted

answered on 07 Sep 2010, 11:32 AM

Hi Ken,

Yes, the positioning problem I am talking about is exhibited only in IE versions 7 and below. How are you setting the position:relative style and to what element? If the scrollable container is a RadPane, you should do this:

<telerik:RadPane CssClass="relativePane" />

.relativePane
{
position:relative;
}

The problem with RadSplitter height is probably caused by incorrect configuration with regard to height styles - elements with percentage height should have a parent with explicit height, according to web standards. This rule is applied incorrectly by IE7 and the browser tolerates missing parent height styles.

As mentioned in my previous reply, sending a simple demo will make the resolution to the problem quicker.

Greetings,
Dimo
the Telerik team

answered on 07 Sep 2010, 02:41 PM

Hello,

Please see Default.aspx page below. Using IE8 but with the tag forcing compatability mode. Interestingly, the issues are slightly different if this tag is removed.

Let me know if you have any (more) suggestions,

Ken

<meta http-equiv="X-UA-Compatible" content="IE=7" />

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TelerikDemo._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div style="height:800px">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadSplitter ID="uiMasterSplitter" runat="server" Height="81%" Width="99.9%" Orientation="Horizontal" BorderSize="0" VisibleDuringInit="false" EnableEmbeddedSkins="false" Skin="Extranet">

<telerik:RadPane ID="uiTabsPane" runat="server" Scrolling="None" Height="24px">

Tabs Pane Content

</telerik:RadPane>

<telerik:RadPane ID="uiBodyPane" runat="server" Scrolling="None">

<telerik:RadSplitter ID="uiMainSplitter" runat="server" VisibleDuringInit="false" EnableEmbeddedSkins="false" SplitBarsSize="6">

<telerik:RadPane ID="uiSitesPane" runat="server" Scrolling="None" Width="20%" BackColor="#D5ECFA">

Site Pane Content

</telerik:RadPane>

<telerik:RadSplitBar ID="uiMainSplitBarOne" runat="server" CollapseMode="Forward" EnableResize="false"/>

<telerik:RadPane ID="uiSiteViewPane" runat="server" Scrolling="None" Width="15%">

<telerik:RadSplitter ID="uiSiteViewSplitter" runat="server" Orientation="Horizontal" BorderSize="0" VisibleDuringInit="false">

<telerik:RadPane ID="uiSearchPane" runat="server" Height="55px">

Search Pane Content

</telerik:RadPane>

<telerik:RadPane ID="uiTreeViewPane" runat="server" Height="100%" BackColor="#E6F4FC">

Treeview Pane Content

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

<telerik:RadSplitBar ID="uiMainSplitBarTwo" runat="server" CollapseMode="Forward" />

<telerik:RadPane ID="uiContentAndTermsPane" runat="server" Scrolling="None" Width="70%">

<telerik:RadSplitter ID="rightSplitter" runat="server" Orientation="Horizontal" BorderSize="0" VisibleDuringInit="false">

<telerik:RadPane ID="uiContentPane" runat="server" Scrolling="Y" Height="95%" BorderSize="0">

Content Pane Content

<telerik:RadSplitter ID="uiRadSplitterPlotSales" runat="server" Orientation="Horizontal">

<telerik:RadPane ID="uiWelcomePane" runat="server">

Welcome Pane Content

</telerik:RadPane>

<telerik:RadPane ID="uiSearchPaneTwo" runat="server">

Search Pane Two Content

<asp:Table ID="Table1" runat="server">

<asp:TableRow>

<asp:TableCell><asp:Label ID="Label1" runat="server" Text="Development: "></asp:Label></asp:TableCell>

<asp:TableCell><telerik:RadComboBox ID="uiRadCmbDevelopment" runat="server"></telerik:RadComboBox></asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell><asp:Label ID="Label2" runat="server" Text="Phase: "></asp:Label></asp:TableCell>

<asp:TableCell><telerik:RadComboBox ID="uiRadCmbPhase" runat="server"></telerik:RadComboBox></asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell><asp:Label ID="Label3" runat="server" Text="Plot: "></asp:Label></asp:TableCell>

<asp:TableCell><telerik:RadComboBox ID="uiRadCmbPlot" runat="server"></telerik:RadComboBox></asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell><asp:Label ID="Label4" runat="server" Text="Exchanged: "></asp:Label></asp:TableCell>

<asp:TableCell><asp:Label ID="Label5" runat="server" Text="From "></asp:Label><telerik:RadDatePicker ID="uiRadDteExchangedFrom" runat="server"></telerik:RadDatePicker></asp:TableCell>

<asp:TableCell><asp:Label ID="Label6" runat="server" Text="To "></asp:Label><telerik:RadDatePicker ID="uiRadDteExchangedTo" runat="server"></telerik:RadDatePicker></asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell><asp:Label ID="Label7" runat="server" Text="Completed: "></asp:Label></asp:TableCell>

<asp:TableCell><asp:Label ID="Label8" runat="server" Text="From "></asp:Label><telerik:RadDatePicker ID="uiRadDteCompletedFrom" runat="server"></telerik:RadDatePicker></asp:TableCell>

<asp:TableCell><asp:Label ID="Label9" runat="server" Text="To "></asp:Label><telerik:RadDatePicker ID="uiRadDteCompletedTo" runat="server"></telerik:RadDatePicker></asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell><asp:Label ID="Label10" runat="server" Text="Contract Sent: "></asp:Label></asp:TableCell>

<asp:TableCell><telerik:RadDatePicker ID="uiRadDteContractSent" runat="server"></telerik:RadDatePicker></asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell><asp:Label ID="Label11" runat="server" Text="Reservation From Received: "></asp:Label></asp:TableCell>

<asp:TableCell><telerik:RadDatePicker ID="uiRadDteReservation" runat="server"></telerik:RadDatePicker></asp:TableCell>

</asp:TableRow>

</asp:Table>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

<telerik:RadPane ID="uiSiteTermsPane" runat="server" Scrolling="None" Height="25px">

Site Terms Pane Content

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>