Problem with Menu in RadDock title

6 posts, 0 answers
  1. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 25 Oct 2012 Link to this post

    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>
     
    <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
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 29 Oct 2012 Link to this post

    Hello Andreas,

    As mentioned in the comment included in the code snippet, these CSS styles were added in order to improve the drag and drop functionality in mobile browsers. If you want to ensure that the RadMenu or any other control in the content of the upper dock will overlap the dock at the bottom, please apply higher z-index to the first dock and lower to the second.

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 29 Oct 2012 Link to this post

    Well,

    That was not a solution I was hoping for...
    In our real world case, we have a menu in that second dock as well, so after moving the second dock above the first dock, we will have to recalculate z-indexes for all docks?
  5. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 01 Nov 2012 Link to this post

    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.
  6. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 08 Nov 2012 Link to this post

    Hi,

    I haven't tested on a touch device yet, but will this "fix" really work on touch devices???
    Chrome and Firefox do exists on some touch devices, right?

    Regards
    Caesar
  7. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 12 Nov 2012 Link to this post

    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
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017