Basically when a user runs an old browser or IE8 in compatiblity mode, my RadButtons at the top of one of my RadPanels appear to hover on the right as you scroll down and then when you move your mouse over them they disappear and don't come back. It works completely correct in IE8 and if it is not in a RadSplitter. I am running the 2011.2.915.35 version of the tools. To demonstrate this, I have created the following ASPX page to demonstrate:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Playground Page</title> </head> <body class="BODY"> <form runat="server" id="mainForm" method="post"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" ResizeWithBrowserWindow="true" ResizeWithParentPane="true" Orientation="Vertical" > <telerik:RadPane ID="SearchPane" runat="server" Width="280" BackColor="#DDDDDD" > <asp:Panel ID="SearchResultGroup" runat="server" Height="100%" > Some stuff here </asp:Panel> </telerik:RadPane> <telerik:RadPane ID="ContentPane" runat="server" Scrolling="Both" > <asp:Panel ID="ContentGrouping" runat="server" > <table width="100%"> <tr> <td align="center">Page Header Here</td> <td align="right" width="350px" style="padding-top:5px;"> <telerik:RadButton ID="testButton" Text="Test Button" runat="server" > <Icon PrimaryIconCssClass="rbHelp" /> </telerik:RadButton><br /> </td> </tr> <tr> <td colspan="2"> <% for (int i=0; i < 80; i++) { %> ROW <%= i %> ADDED TO CREATE SCROLL<br /> <% } %> </td> </tr> </table> </asp:Panel> </telerik:RadPane> </telerik:RadSplitter> </form> </body> </html>Thanks, I would like to resolve this since IE8 runs intranet sites by default in compatiblity mode and thus most of my users are effected by this.
Shane
3 Answers, 1 is accepted
0
Shane
Top achievements
Rank 1
Rank 1
answered on 30 Sep 2011, 07:12 AM
For the time being we swapped out the telerik:RadButtons and dropped in:
In this case, regardless of compatibility mode or browser, these will scroll with the splitter panel properly. Ideally we would like to switch back because then the style is consistent but for now this will work.
Shane
<asp:Button ID="btnFormSave" runat="server" OnClick="btnFormSave_Click" Text="Save" Style="background-image:url('/OurApp/App_Themes/Images/buttonicon_save.png'); background-color:#DDDDDD; cursor:hand; background-repeat:no-repeat; background-position:left; padding-left:24px;" Height="27px" Width="70px" />In this case, regardless of compatibility mode or browser, these will scroll with the splitter panel properly. Ideally we would like to switch back because then the style is consistent but for now this will work.
Shane
0
Accepted
Hi Shane,
You could still use RadButton with the fix provided bellow. You should use position: relative to be applied to RadButton content element, fixes marked in yellow:
The fix will be applied to IE7 and compatibility mode only.
More information about that bug and the fix you could find at: RadButton IE7 known issues.
All the best,
Bozhidar
the Telerik team
You could still use RadButton with the fix provided bellow. You should use position: relative to be applied to RadButton content element, fixes marked in yellow:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Playground Page</title> <style type="text/css"> *+ .ie7ScrollFix { position: relative; } </style></head><body class="BODY"> <form runat="server" id="mainForm" method="post"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" ResizeWithBrowserWindow="true" ResizeWithParentPane="true" Orientation="Vertical"> <telerik:RadPane ID="SearchPane" runat="server" Width="280" BackColor="#DDDDDD"> <asp:Panel ID="SearchResultGroup" runat="server" Height="100%"> Some stuff here </asp:Panel> </telerik:RadPane> <telerik:RadPane ID="ContentPane" runat="server" Scrolling="Both" CssClass="ie7ScrollFix"> <asp:Panel ID="ContentGrouping" runat="server"> <table width="100%"> <tr> <td align="center"> Page Header Here </td> <td align="right" width="350px" style="padding-top: 5px;"> <telerik:RadButton ID="testButton" Text="Test Button" runat="server"> <Icon PrimaryIconCssClass="rbHelp" /> </telerik:RadButton> <br /> </td> </tr> <tr> <td colspan="2"> <% for (int i = 0; i < 80; i++) { %> ROW <%= i %> ADDED TO CREATE SCROLL<br /> <% } %> </td> </tr> </table> </asp:Panel> </telerik:RadPane> </telerik:RadSplitter> </form></body></html>The fix will be applied to IE7 and compatibility mode only.
More information about that bug and the fix you could find at: RadButton IE7 known issues.
All the best,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Shane
Top achievements
Rank 1
Rank 1
answered on 30 Sep 2011, 08:07 AM
I saw that and could swear I tried it but I must have applied it at the wrong level or something because I thought that didn't work. In any case, I added it to my style sheet and made the change as you suggested and it worked.
Thanks for the follow-up,
Shane
Thanks for the follow-up,
Shane