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

RadButtons IE 7 & IE 8

2 Answers 136 Views

Button

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

Toby asked on 27 Jul 2011, 08:17 AM

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.

<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

Accepted

answered on 27 Jul 2011, 04:44 PM

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;

}

</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.