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
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
7 Answers, 1 is accepted
0
Accepted
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
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
0
Ken Jones
Top achievements
Rank 1
Rank 1
answered on 07 Sep 2010, 11:09 AM
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
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
0
Ken Jones
Top achievements
Rank 1
Rank 1
answered on 07 Sep 2010, 11:22 AM
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:
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
<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
0
Accepted
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
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
0
Ken Jones
Top achievements
Rank 1
Rank 1
answered on 07 Sep 2010, 11:44 AM
Thanks, will create a sample project to demonstrate the issue.
Ken
Ken
0
Ken Jones
Top achievements
Rank 1
Rank 1
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
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"/> <!-- 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> 0
Ken Jones
Top achievements
Rank 1
Rank 1
answered on 08 Sep 2010, 11:52 AM
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
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