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

Frozen buttons and checkboxes in scrolling RadPane

2 Answers 85 Views

Splitter

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

Javier asked on 04 Mar 2011, 10:31 PM

1-IE-before-resize.JPG

2-IE-after-resize.JPG

3-IE-after-scroll.JPG

4-Same-page-in-Chrome.JPG

I have a RadSplitter containing 3 horizontal panes, bottom and top fixed size. The middle pane contains a html table with several Telerik controls, including RadButtons, NumericTextBoxes and other buttons. The problem is that when the web browser is resized to be smaller than the natural size of the table, the button and checkbox controls appear frozen on the screen and do not scroll along with the rest of the contents of the RadPane. The interesting part is that it only happens with IE7 and only when the web page is being hosted from a remote IIS server. If I launch the project from VS2010 using the development web server, I see no problem. If I deploy to the remote web server and use FireFox or Chrome the page renders and behaves properly. It is only when I use IE7 and the browser window size is smaller than the size of the table (in which I expect to get the scrollbars just lime in Chrome and FF), 2 scrollbars appear and the controls appear frozen on the page.

The remote web server is a Win2003 IIS 6.0. I'm using VS2010 with Telerik.Web.UI_2010_3_1317 and .NET4.0.

Included are 3 snapshots of the problem in IE and one of the page behaving properly in Chrome. Here is the code (there is a lot of filler to increase the table size and illustrate the issue):

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Sample.aspx.vb" Inherits="RadControlsWebApp1.Sample" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; margin: 0px auto; padding: 0px;">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

</head>

<body style="width: 100%; height: 100%; margin: 0px auto; padding: 0px;">

<form id="form1" runat="server" style="width: 100%; height: 100%; margin: 0px auto; padding: 0px;">

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

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Office2007">

</telerik:RadSkinManager>

<div style="width: 100%; height: 100%;">

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" Orientation="Horizontal" VisibleDuringInit="false" BorderSize="0">

<telerik:RadPane ID="RadPane1" runat="server" Height="20" Locked="true">

<span style="vertical-align: middle; font-size: 14px; font-weight: bold; margin: 2px;">Title:</span>

</telerik:RadPane>

<telerik:RadPane ID="RadPane2" runat="server" Height="100%">

<div style="height: 100%;">

<table>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

<telerik:RadButton ID="CheckBox1" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" Text="CheckBox1" />

</td>

</tr>

<tr>

<td>

<telerik:RadButton ID="CheckBox2" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" Text="CheckBox2" />

</td>

</tr>

<tr>

<td>

<telerik:RadButton ID="CheckBox3" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" Text="CheckBox3" />

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

Print Count:

<telerik:RadNumericTextBox ID="NumericTextBox1" runat="server" NumberFormat-DecimalDigits="0" MaxValue="99" MinValue="0" Width="50" ShowSpinButtons="false" />

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

Category:

<telerik:RadComboBox ID="ComboBox1" runat="server" Width="200px">

<Items>

<telerik:RadComboBoxItem Text="Item 1" />

<telerik:RadComboBoxItem Text="Item 2" />

<telerik:RadComboBoxItem Text="Item 3" />

</Items>

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

<telerik:RadButton ID="RadButton1" runat="server" Text="Button1" />

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

</table>

</div>

</telerik:RadPane>

<telerik:RadPane ID="RadPane3" runat="server" Height="30" Locked="true">

<table width="100%">

<tr>

<td>

<telerik:RadButton ID="RadButton2" runat="server" Text="Button2" AutoPostBack="false" />

<telerik:RadButton ID="RadButton3" runat="server" Text="Button3" AutoPostBack="false" />

</td>

<td style="text-align: right">

<telerik:RadButton ID="RadButton4" runat="server" Text="Button4" AutoPostBack="false" />

<telerik:RadButton ID="RadButton5" runat="server" Text="Button5" AutoPostBack="false" />

</td>

</tr>

</table>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

2 Answers, 1 is accepted

answered on 07 Mar 2011, 09:17 AM

Hello Javier,

This is known issue with IE7 and the fix is explained here: RadButton known issues in IE7.

In your case, the fix would be the following:

<form id="form1" runat="server" style="width: 100%; height: 100%; margin: 0px auto;

padding: 0px;">

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

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Office2007">

</telerik:RadSkinManager>

<div style="width: 100%; height: 100%;">

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%"

Orientation="Horizontal" VisibleDuringInit="false" BorderSize="0">

<telerik:RadPane ID="RadPane1" runat="server" Height="20" Locked="true">

<span style="vertical-align: middle; font-size: 14px; font-weight: bold; margin: 2px;">

Title:</span>

</telerik:RadPane>

<telerik:RadPane ID="RadPane2" runat="server" Height="100%">

<div style="height: 100%; position: relative;">

<table>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

<telerik:RadButton ID="CheckBox1" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"

Text="CheckBox1" />

</td>

</tr>

<tr>

<td>

<telerik:RadButton ID="CheckBox2" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"

Text="CheckBox2" />

</td>

</tr>

<tr>

<td>

<telerik:RadButton ID="CheckBox3" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"

Text="CheckBox3" />

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

Print Count:

<telerik:RadNumericTextBox ID="NumericTextBox1" runat="server" NumberFormat-DecimalDigits="0"

MaxValue="99" MinValue="0" Width="50" ShowSpinButtons="false" />

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

Category:

<telerik:RadComboBox ID="ComboBox1" runat="server" Width="200px">

<Items>

<telerik:RadComboBoxItem Text="Item 1" />

<telerik:RadComboBoxItem Text="Item 2" />

<telerik:RadComboBoxItem Text="Item 3" />

</Items>

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

<telerik:RadButton ID="RadButton1" runat="server" Text="Button1" />

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

<tr>

<td>

..

</td>

</tr>

</table>

</div>

</telerik:RadPane>

<telerik:RadPane ID="RadPane3" runat="server" Height="30" Locked="true">

<table width="100%">

<tr>

<td>

<telerik:RadButton ID="RadButton2" runat="server" Text="Button2" AutoPostBack="false" />

<telerik:RadButton ID="RadButton3" runat="server" Text="Button3" AutoPostBack="false" />

</td>

<td style="text-align: right">

<telerik:RadButton ID="RadButton4" runat="server" Text="Button4" AutoPostBack="false" />

<telerik:RadButton ID="RadButton5" runat="server" Text="Button5" AutoPostBack="false" />

</td>

</tr>

</table>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

Regards,
Bojo
the Telerik team

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Frozen buttons and checkboxes in scrolling RadPane

2 Answers, 1 is accepted