Frozen buttons and checkboxes in scrolling RadPane

3 posts, 0 answers
  1. Javier
    Javier avatar
    4 posts
    Member since:
    Jan 2011

    Posted 04 Mar 2011 Link to this post

    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. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 07 Mar 2011 Link to this post

    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!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Javier
    Javier avatar
    4 posts
    Member since:
    Jan 2011

    Posted 08 Mar 2011 Link to this post

    Thanks for the response.  Just one note:  I implemented the fix as described in the response but it originally did not work.  After I read the linked article, I explicitly added the "overflow" parameter to the style of the div and this time it worked.  Thanks for your help!  =)
Back to Top