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

Problem with Menu in RadDock title

8 Answers 70 Views

Dock

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

Andreas asked on 25 Oct 2012, 06:37 AM

Hi,

We are using a RadMenu in the title of a RadDock.
But after upgrading to 2012.3.1016, we have problems with the z-index of the menu. The menu appears behind the RadDock below...
It does only happen in Chrome and Firefox, IE is not affected!

See the following example:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="dock.aspx.vb" Inherits="TestaTredjepartWeb.dock" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="s" runat="server">

</asp:ScriptManager>

<telerik:RadDockZone runat="server" ID="dz">

<telerik:RadDock runat="server" ID="aaa">

<TitlebarTemplate>

<telerik:RadMenu runat="server" ID="mm">

<Items>

<telerik:RadMenuItem Text="aaa">

<Items>

<telerik:RadMenuItem Text="bbb"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="ccc"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</TitlebarTemplate>

</telerik:RadDock>

<telerik:RadDock runat="server" ID="RadDock1"></telerik:RadDock>

</telerik:RadDockZone>

</div>

</form>

</body>

</html>

When expanding the menu, it will appear behind the lower RadDock, this wasn't the case in the previous version of Telerik.

We have managed to narrow it down to the following css:

.RadDock {

/* improves drag&drop in mobile browsers */

-webkit-transform: rotate3d(0, 0, 1, 0);

-webkit-backface-visibility: hidden;

-webkit-perspective: 1000;

-moz-transform: rotate3d(0, 0, 1, 0);

-moz-backface-visibility: hidden;

-moz-perspective: 1000;

-o-transform: rotate3d(0, 0, 1, 0);

-o-backface-visibility: hidden;

-o-perspective: 1000;

-ie-transform: rotate3d(0, 0, 1, 0);

-ie-backface-visibility: hidden;

-ie-perspective: 1000;

}

When overriding the transform or backface property, the problem is fixed, but I guess there is a reason for this new css?

Regards
Caesar

8 Answers, 1 is accepted

answered on 01 Nov 2012, 03:30 PM

Hi Antonius,

Indeed, this solution is not very practical because it does not cover changing the position of the docks. Please add the following override before the closing body tag of your page and the menu will be positioned over the docks in Chrome and Firefox:

<script type="text/javascript">

var oldInit = Telerik.Web.UI.RadDock.prototype.initialize;

Telerik.Web.UI.RadDock.prototype.initialize = function ()

{

oldInit.call(this);

if (!$telerik.isTouchDevice) //fix issue with silverlight in desktop FF

if (!$telerik.isSafari)

$telerik.$(this._element).css({ transform: "none", backfaceVisibility: "visible", perspective: "none" });

else

$telerik.$(this._element).css("-webkit-transform", "none").css("-webkit-backfaceVisibility", "visible" ).css("-webkit-perspective", "none");

}

</script>

Greetings,
Slav
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.

answered on 12 Nov 2012, 05:20 PM

Hello Andreas,

Actually, the menu will be displayed under the docks in touch devices as well. The overlapping of the menu by the docks stems from the z-index stacking behavior. If a dock has higher z-index than the rest of the docks, its content (in your case the menu) will be displayed over them. The previous solution I suggested - setting the z-index of the dock with the menu to the highest value - is the one that will ensure the controls will be displayed as expected. To set the z-index you can reference the dock on the client and retrieve its HTML element via the get_element() method of the RadDock client-side API.

Excuse me for the caused inconvenience.

Kind regards,
Slav
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Problem with Menu in RadDock title

8 Answers, 1 is accepted