RadButtons IE 7 & IE 8

3 posts, 1 answers
  1. Toby
    Toby avatar
    2 posts
    Member since:
    May 2011

    Posted 27 Jul 2011 Link to this post


    I'm having issues with my RadButtons within a RadPane. I have three panes, title, content and button pane at the bottom.

    The problem is when I resize the browser to a shorter height, the RadButtons overlap the button pane. This happens only in IE 7 and 8. The odd thing is that the scroll bar does appear noticing the overflow however, it doesn't affect the Radbuttons AT ALL. It seems the z-index or something similar that is causing the overlap with a fixed position as soon as the pane overflows.

    <head id="Head1" runat="server">
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all" EnableRoundedCorners="False" />
            <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Black">
            <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Height="100%"/>
            <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" Orientation="Horizontal">
                <telerik:RadPane ID="TitlePane" runat="server" Height="75" MinHeight="75" MaxHeight="75" Scrolling="none" BackColor="Lime">
                <telerik:RadPane ID="NestedPane" runat="server" Scrolling="none">
                    <telerik:RadSplitter ID="NestedSplitter" runat="server" Height="100%" Width="100%" Orientation="Horizontal">
                        <telerik:RadPane ID="LeftPane" runat="server" width="50%" BackColor="Blue">
                                <div style="display:block; height:200px;"></div>
                                <div><telerik:RadButton ID="RadButton0" runat="server" Text="RadButton0"></telerik:RadButton></div>
                                <div><telerik:RadButton ID="RadButton1" runat="server" Text="RadButton1" ButtonType="ToggleButton" ToggleType="CheckBox"></telerik:RadButton></div>
                                <div><telerik:RadButton ID="RadButton2" runat="server" Text="RadButton2" ButtonType="ToggleButton" ToggleType="Radio"></telerik:RadButton></div>
                                <div><telerik:RadButton ID="RadButton3" runat="server" Text="RadButton3" ButtonType="LinkButton"></telerik:RadButton></div>
                                <div><asp:Button ID="RadButton4" runat="server" Text="RadButton3" ButtonType="LinkButton"></asp:Button></div>
                        <telerik:RadPane ID="ContentPane" runat="server" Scrolling="none" Width="100%" Height="100%">

  2. Answer
    Slav avatar
    1359 posts

    Posted 27 Jul 2011 Link to this post

    Hi Toby,

    Using the code snippet that you provided I was able to reproduce a problem, similar to your description - the RadButtons from the blue RadPane are passing on the pane below. This issue most probably comes from an IE7 bug where a relatively positioned element is incorrectly overlayed over the other elements. Please try adding the following code to your page and set the CSS class .buttonsPane to the RadPane, containing the buttons:
    <style type="text/css">
        * + html .buttonsPane
            position: relative;

    You can check the fix in this demonstration video: http://screencast.com/t/3TjCGjAOn.

    Please let us know if you have any trouble implementing the solution.

    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Toby
    Toby avatar
    2 posts
    Member since:
    May 2011

    Posted 27 Jul 2011 Link to this post


    Problem solved!
Back to Top