DatePicker Scrolling Issue in IE8

8 posts, 2 answers
  1. Ken Jones
    Ken Jones avatar
    41 posts
    Member since:
    Sep 2009

    Posted 06 Sep 2010 Link to this post

    Hello,

    I have searched the forums for someone who has had this issue but havent found anything. I am using some DatePicker controls in a web page but when I scroll the page, the textbox part of the control scrolls with the page but the buttons do not scroll.

    Is this a known issue?

    Ken

    P.S. I am using Telerik RadControls for ASP.NET Ajax v2008.3.1314.35
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 07 Sep 2010 Link to this post

    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
  3. Ken Jones
    Ken Jones avatar
    41 posts
    Member since:
    Sep 2009

    Posted 07 Sep 2010 Link to this post

    Hello,

    Thanks for your reply. I have attempted the position:relative solution but this resulted in the controls not scrolling at all.

    Unfortunately, the solution we have uses the RadControls quite heavily and I dont think upgrading to the latest versions is an option as we have styling on RadGrids and RadSplitters which I believe works in a different way in the new controls.

    Please let me know if you are aware of any other solutions,

    Ken
  4. Ken Jones
    Ken Jones avatar
    41 posts
    Member since:
    Sep 2009

    Posted 07 Sep 2010 Link to this post

    A further update to this is that I have just realised that I have this issue when IE8 is forced to run in compatability mode using the following tag on the master page:

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

    If I remove the tag then my RadSplitter control shrink to only fill 60% of the page rather than 95%, the RadComboBox controls fill the width of the parent control as do the DateTimePickers.

    Any ideas?

    Ken
  5. Answer
    Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 07 Sep 2010 Link to this post

    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
    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
  6. Ken Jones
    Ken Jones avatar
    41 posts
    Member since:
    Sep 2009

    Posted 07 Sep 2010 Link to this post

    Thanks, will create a sample project to demonstrate the issue.

    Ken
  7. Ken Jones
    Ken Jones avatar
    41 posts
    Member since:
    Sep 2009

    Posted 07 Sep 2010 Link to this post

    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" %>
      
    <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"/>
                        <!-- Treeview & Search Pane -->
                        <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>
                        <!-- SplitBar between Panes -->
                        <telerik:RadSplitBar ID="uiMainSplitBarTwo" runat="server" CollapseMode="Forward" />
                        <!-- Right Pane -->                
                        <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>
  8. Ken Jones
    Ken Jones avatar
    41 posts
    Member since:
    Sep 2009

    Posted 08 Sep 2010 Link to this post

    Hello,

    I believe that I have solved this by using the same CssClass for all of the RadPanes that I am using and applying the position:relative; to that class.

    Thanks fro your help.

    Ken
Back to Top