Hi,
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.
Cheers,
Toby
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.
<html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all" EnableRoundedCorners="False" /> <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Black"> </telerik:RadSkinManager> <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1"> </telerik:RadAjaxManager> <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> <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> <telerik:RadPane ID="ContentPane" runat="server" Scrolling="none" Width="100%" Height="100%"> </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPane> </telerik:RadSplitter> </form></body></html>Cheers,
Toby
2 Answers, 1 is accepted
0
Accepted
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:
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.
Regards,
Slav
the Telerik team
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; }</style>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.
Regards,
Slav
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.
0
Toby
Top achievements
Rank 1
Rank 1
answered on 28 Jul 2011, 03:08 AM
Cheers,
Problem solved!
Problem solved!