Hi,
I am facing an issue on undocking sliding pane as left side bar. The right side having a menu panel. On hovering sliding pane does not cover (overlapp) the menu panel. Rest of the pane covers the right hand side but only the menu panel.
This is happening while we are upgrading the telerik controls from 2008 version to 2012 version. All the issues of have been resolved but this.
The z-index of the menu penal is getting applied though new telerik DLL and the value is 7000, while the sliding pane is having 2000 z-index. Again getting applied through new telerik DLL. We tried to override the z-index but it doesn't get overridden. Any help is much appreciated.
I am facing an issue on undocking sliding pane as left side bar. The right side having a menu panel. On hovering sliding pane does not cover (overlapp) the menu panel. Rest of the pane covers the right hand side but only the menu panel.
This is happening while we are upgrading the telerik controls from 2008 version to 2012 version. All the issues of have been resolved but this.
The z-index of the menu penal is getting applied though new telerik DLL and the value is 7000, while the sliding pane is having 2000 z-index. Again getting applied through new telerik DLL. We tried to override the z-index but it doesn't get overridden. Any help is much appreciated.
7 Answers, 1 is accepted
0

Princy
Top achievements
Rank 2
answered on 12 Nov 2012, 07:56 AM
Hi Lokesh,
I suppose you want a RadSlidingPane to overlap a RadMenu. Here is the sample code that I tried which works as expected.
ASPX:
CSS:
Thanks,
Princy.
I suppose you want a RadSlidingPane to overlap a RadMenu. Here is the sample code that I tried which works as expected.
ASPX:
<
telerik:RadMenu
ID
=
"RadMenu1"
runat
=
"server"
CssClass
=
"MenuCss"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"item"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"item"
></
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Text
=
"item"
></
telerik:RadMenuItem
>
</
Items
>
</
telerik:RadMenu
>
CSS:
<style type=
"text/css"
>
.MenuCss
{
z-index
:
1900
!important
;
}
</style>
Thanks,
Princy.
0

Lokesh
Top achievements
Rank 1
answered on 19 Nov 2012, 06:52 AM
Princy, Thanks for the reply.
Yes I want exactly that. Overlapping the sliding pane on menu panel on undocking it.
However, I changed the z-index of rad sliding panel and rad menu, simultaneously and separately but that does not work.
I also noticed that default code works just fine in IE9, Chrome and Firefox. It is a problem in IE7 and IE8.
Thanks.
Yes I want exactly that. Overlapping the sliding pane on menu panel on undocking it.
However, I changed the z-index of rad sliding panel and rad menu, simultaneously and separately but that does not work.
I also noticed that default code works just fine in IE9, Chrome and Firefox. It is a problem in IE7 and IE8.
Thanks.
0
Hi Lokesh,
I tested the provided by Princy code, but everything is working as expected on our side even in IE8 and IE7.
For your convenience I am attaching my test page - could you examine it an tell me if you reproduce the issue with it? If no, could you modify it to a point where the problem occurs and send it back? For my test I used the latest version of RadControls (2012.3.1016).
Kind regards,
Vesi
the Telerik team
I tested the provided by Princy code, but everything is working as expected on our side even in IE8 and IE7.
For your convenience I am attaching my test page - could you examine it an tell me if you reproduce the issue with it? If no, could you modify it to a point where the problem occurs and send it back? For my test I used the latest version of RadControls (2012.3.1016).
Kind regards,
Vesi
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.
0

Lokesh
Top achievements
Rank 1
answered on 23 Nov 2012, 01:11 PM
Dear Vesi,
Thanks for the reply.
Please find below my code snippet which is not working in IE7, IE8(Compatibility View), IE9(Compatibility View), that is menu items are appearing over the sliding pane on undocking.
Also, If we remove the applied CSS class (
I am using the Telerik.Web.UI, v.2012.2.724.35 version.
Your early reply is very much appreciated.
Thanks,
Lokesh
Thanks for the reply.
Please find below my code snippet which is not working in IE7, IE8(Compatibility View), IE9(Compatibility View), that is menu items are appearing over the sliding pane on undocking.
Also, If we remove the applied CSS class (
CssClass
=
"MenuCss"
) from (<
telerik:RadMenu
ID
=
"RadMenu1"
), this does not work in any browser in any mode, that is menu items appearing over the sliding pane. However after applying this CSS; IE7, IE8(Compatibility View), IE9(Compatibility View) still don't work.I am using the Telerik.Web.UI, v.2012.2.724.35 version.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<!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"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
telerik:RadStyleSheetManager
id
=
"RadStyleSheetManager1"
runat
=
"server"
/>
<
style
type
=
"text/css"
>
.MenuCss
{
z-index:1900!important;
}
</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
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"
>
//Put your JavaScript code here.
</
script
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
</
telerik:RadAjaxManager
>
<
div
>
<
telerik:RadSplitter
ID
=
"RadSplitterHome"
runat
=
"server"
Orientation
=
"horizontal"
ResizeWithBrowserWindow
=
"true"
ResizeWithParentPane
=
"true"
VisibleDuringInit
=
"true"
Height
=
"300"
Width
=
"1000"
>
<
telerik:RadPane
ID
=
"RadPaneClient"
runat
=
"server"
Height
=
"100%"
Scrolling
=
"None"
>
<
telerik:RadSplitter
ID
=
"RadSplitterClient"
runat
=
"server"
Width
=
"100%"
Height
=
"100%"
Orientation
=
"vertical"
ResizeWithParentPane
=
"true"
LiveResize
=
"true"
>
<
telerik:RadPane
ID
=
"RadPaneTree"
MaxWidth
=
"500"
runat
=
"server"
Width
=
"24"
Style
=
"width: 23px;"
>
<
div
id
=
"treeDiv"
style
=
"position: absolute; height: 70%;"
>
<
telerik:RadSlidingZone
ID
=
"RadSlidingZone1"
runat
=
"server"
Width
=
"23"
SlideDirection
=
"Right"
DockedPaneId
=
"RadSlidingPaneTree"
>
<
telerik:RadSlidingPane
ID
=
"RadSlidingPane1"
runat
=
"server"
Width
=
"220"
Scrolling
=
"Y"
ToolTip
=
"First"
Title
=
"First"
IconUrl
=
"~/Images/First.gif"
TabView
=
"ImageOnly"
EnableDock
=
"true"
>
<
telerik:RadTreeView
ID
=
"RadTreeView1"
runat
=
"server"
Height
=
"96%"
>
</
telerik:RadTreeView
>
</
telerik:RadSlidingPane
>
<
telerik:RadSlidingPane
ID
=
"RadSlidingPane2"
runat
=
"server"
Width
=
"220"
Scrolling
=
"Y"
ToolTip
=
"Second"
Title
=
"Second"
IconUrl
=
"~/Images/Second.gif"
TabView
=
"ImageOnly"
>
<
telerik:RadTreeView
ID
=
"RadTreeView2"
runat
=
"server"
Height
=
"96%"
>
</
telerik:RadTreeView
>
</
telerik:RadSlidingPane
>
</
telerik:RadSlidingZone
>
</
div
>
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"split"
runat
=
"server"
EnableViewState
=
"true"
CollapseMode
=
"forward"
/>
<
telerik:RadPane
ID
=
"RadPaneContentArea"
runat
=
"server"
Height
=
"100%"
Scrolling
=
"none"
>
<
telerik:RadSplitter
ID
=
"RadSplitterContentArea"
runat
=
"server"
Width
=
"100%"
Height
=
"100%"
Orientation
=
"Horizontal"
ResizeWithParentPane
=
"true"
LiveResize
=
"true"
>
<
telerik:RadPane
ID
=
"RadPaneToolbar"
runat
=
"server"
Height
=
"34px"
Scrolling
=
"none"
>
<
div
id
=
"menuDiv"
style
=
"width: 85%; height: 7%;"
>
<
telerik:RadMenu
ID
=
"RadMenu1"
runat
=
"server"
CssClass
=
"MenuCss"
>
<
Items
><
telerik:RadMenuItem
ImageUrl
=
"Images/save.jpg"
></
telerik:RadMenuItem
></
Items
>
<
Items
><
telerik:RadMenuItem
ImageUrl
=
"Images/print.jpg"
></
telerik:RadMenuItem
></
Items
>
</
telerik:RadMenu
>
</
div
>
</
telerik:RadPane
>
<
telerik:RadPane
ID
=
"RadPaneContent"
runat
=
"server"
Scrolling
=
"Both"
>
</
telerik:RadPane
>
<
telerik:RadPane
ID
=
"RadPaneInformation"
runat
=
"server"
Height
=
"1"
Scrolling
=
"None"
>
<
telerik:RadSlidingZone
ID
=
"RadSlidingZoneInfo"
runat
=
"server"
Height
=
"1"
SlideDirection
=
"Top"
ClickToOpen
=
"true"
>
<
telerik:RadSlidingPane
ID
=
"RadSlidingPaneInfo"
runat
=
"server"
Height
=
"200"
EnableResize
=
"true"
Scrolling
=
"none"
EnableDock
=
"true"
>
<
telerik:RadSplitter
ID
=
"RadSplitterSlide"
runat
=
"server"
Width
=
"100%"
>
<
telerik:RadPane
ID
=
"RadPaneSlide"
runat
=
"server"
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadSlidingPane
>
</
telerik:RadSlidingZone
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
div
>
</
form
>
</
body
>
</
html
>
Your early reply is very much appreciated.
Thanks,
Lokesh
0

Lokesh
Top achievements
Rank 1
answered on 23 Nov 2012, 01:20 PM
Dear Vesi,
Thanks for the reply.
Please find below my code snippet which is not working in IE7, IE8(Compatibility View), IE9(Compatibility View), that is menu items are appearing over the sliding pane on undocking.
Also, If we remove the applied CSS class ( CssClass="MenuCss") from (<telerik:RadMenu ID="RadMenu1"), this does not work in any
browser in any mode, that is menu items appearing over the sliding pane. However after applying this CSS; IE7, IE8(Compatibility View), IE9(Compatibility View) still don't work.
I am using the Telerik.Web.UI, v.2012.2.724.35 version.
<
telerik:RadSplitter
ID
=
"RadSplitterHome"
runat
=
"server"
Orientation
=
"horizontal"
ResizeWithBrowserWindow
=
"true"
ResizeWithParentPane
=
"true"
VisibleDuringInit
=
"true"
Height
=
"300"
Width
=
"1000"
>
<
telerik:RadPane
ID
=
"RadPaneClient"
runat
=
"server"
Height
=
"100%"
Scrolling
=
"None"
>
<
telerik:RadSplitter
ID
=
"RadSplitterClient"
runat
=
"server"
Width
=
"100%"
Height
=
"100%"
Orientation
=
"vertical"
ResizeWithParentPane
=
"true"
LiveResize
=
"true"
>
<
telerik:RadPane
ID
=
"RadPaneTree"
MaxWidth
=
"500"
runat
=
"server"
Width
=
"24"
Style
=
"width: 23px;"
>
<
div
id
=
"treeDiv"
style
=
"position: absolute; height: 70%;"
>
<
telerik:RadSlidingZone
ID
=
"RadSlidingZone1"
runat
=
"server"
Width
=
"23"
SlideDirection
=
"Right"
DockedPaneId
=
"RadSlidingPaneTree"
>
<
telerik:RadSlidingPane
ID
=
"RadSlidingPane1"
runat
=
"server"
Width
=
"220"
Scrolling
=
"Y"
ToolTip
=
"First"
Title
=
"First"
IconUrl
=
"~/Images/First.gif"
TabView
=
"ImageOnly"
EnableDock
=
"true"
>
<
telerik:RadTreeView
ID
=
"RadTreeView1"
runat
=
"server"
Height
=
"96%"
>
</
telerik:RadTreeView
>
</
telerik:RadSlidingPane
>
<
telerik:RadSlidingPane
ID
=
"RadSlidingPane2"
runat
=
"server"
Width
=
"220"
Scrolling
=
"Y"
ToolTip
=
"Second"
Title
=
"Second"
IconUrl
=
"~/Images/Second.gif"
TabView
=
"ImageOnly"
>
<
telerik:RadTreeView
ID
=
"RadTreeView2"
runat
=
"server"
Height
=
"96%"
>
</
telerik:RadTreeView
>
</
telerik:RadSlidingPane
>
</
telerik:RadSlidingZone
>
</
div
>
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"split"
runat
=
"server"
EnableViewState
=
"true"
CollapseMode
=
"forward"
/>
<
telerik:RadPane
ID
=
"RadPaneContentArea"
runat
=
"server"
Height
=
"100%"
Scrolling
=
"none"
>
<
telerik:RadSplitter
ID
=
"RadSplitterContentArea"
runat
=
"server"
Width
=
"100%"
Height
=
"100%"
Orientation
=
"Horizontal"
ResizeWithParentPane
=
"true"
LiveResize
=
"true"
>
<
telerik:RadPane
ID
=
"RadPaneToolbar"
runat
=
"server"
Height
=
"34px"
Scrolling
=
"none"
>
<
div
id
=
"menuDiv"
style
=
"width: 85%; height: 7%;"
>
<
telerik:RadMenu
ID
=
"RadMenu1"
runat
=
"server"
CssClass
=
"MenuCss"
>
<
Items
><
telerik:RadMenuItem
ImageUrl
=
"Images/save.jpg"
></
telerik:RadMenuItem
></
Items
>
<
Items
><
telerik:RadMenuItem
ImageUrl
=
"Images/print.jpg"
></
telerik:RadMenuItem
></
Items
>
</
telerik:RadMenu
>
</
div
>
</
telerik:RadPane
>
<
telerik:RadPane
ID
=
"RadPaneContent"
runat
=
"server"
Scrolling
=
"Both"
>
</
telerik:RadPane
>
<
telerik:RadPane
ID
=
"RadPaneInformation"
runat
=
"server"
Height
=
"1"
Scrolling
=
"None"
>
<
telerik:RadSlidingZone
ID
=
"RadSlidingZoneInfo"
runat
=
"server"
Height
=
"1"
SlideDirection
=
"Top"
ClickToOpen
=
"true"
>
<
telerik:RadSlidingPane
ID
=
"RadSlidingPaneInfo"
runat
=
"server"
Height
=
"200"
EnableResize
=
"true"
Scrolling
=
"none"
EnableDock
=
"true"
>
<
telerik:RadSplitter
ID
=
"RadSplitterSlide"
runat
=
"server"
Width
=
"100%"
>
<
telerik:RadPane
ID
=
"RadPaneSlide"
runat
=
"server"
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadSlidingPane
>
</
telerik:RadSlidingZone
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
Your early reply is very much appreciated.
Thanks,
Lokesh
0
Accepted
Hi Lokesh,
After a further investigation it turn out that the provided style does not work, because of the "position:absolute" style, applied to the div with id="treeView". Note, that when you are using a SlidingZone, there shouldn't be any other wrapping element between the SlidingZone and its parent RadPane:
For your convenience I am attaching the modified project.
Regards,
Vesi
the Telerik team
After a further investigation it turn out that the provided style does not work, because of the "position:absolute" style, applied to the div with id="treeView". Note, that when you are using a SlidingZone, there shouldn't be any other wrapping element between the SlidingZone and its parent RadPane:
<%--<
div
id
=
"treeDiv"
style
=
"position: absolute; height: 70%;"
>--%>
<
telerik:RadSlidingZone
ID
=
"RadSlidingZone1"
runat
=
"server"
Width
=
"23"
SlideDirection
=
"Right"
DockedPaneId
=
"RadSlidingPaneTree"
Height
=
"70%"
>
...
</
telerik:RadSlidingZone
>
<%--</
div
>--%>
For your convenience I am attaching the modified project.
Regards,
Vesi
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.
0

Lokesh
Top achievements
Rank 1
answered on 27 Nov 2012, 04:58 AM
Thanks Vesi for the resolution. Though, I just figure it out yesterday only. Narrowing down the application to the page level helped me figured it out.
We never looked in that division as it was working just fine in previous versions of Telerik controls.
Thanks much for your help, we now completed the upgradation/migration of Telerik controls from 2008 version to 2012 version :)
Lokesh
We never looked in that division as it was working just fine in previous versions of Telerik controls.
Thanks much for your help, we now completed the upgradation/migration of Telerik controls from 2008 version to 2012 version :)
Lokesh