RadButton Disappears on Scroll

4 posts, 1 answers
  1. Shane
    Shane avatar
    18 posts
    Member since:
    Jan 2011

    Posted 27 Sep 2011 Link to this post

    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">
    <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
  2. Shane
    Shane avatar
    18 posts
    Member since:
    Jan 2011

    Posted 30 Sep 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 30 Sep 2011 Link to this post

    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">
    <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
  5. Shane
    Shane avatar
    18 posts
    Member since:
    Jan 2011

    Posted 30 Sep 2011 Link to this post

    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
Back to Top