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

RadButton Disappears on Scroll

3 Answers 140 Views

Splitter

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

Shane asked on 28 Sep 2011, 04:57 AM

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

answered on 30 Sep 2011, 07:12 AM

For the time being we swapped out the telerik:RadButtons and dropped in:

<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

Accepted

answered on 30 Sep 2011, 07:36 AM

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:

<%@ 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