Set Z-Index of RadWindow

3 posts, 1 answers
  1. Michael
    Michael avatar
    43 posts
    Member since:
    Mar 2013

    Posted 01 May 2013 Link to this post

    How do you set the Z-Index of a RadWindow or what is the Z-Index so that it is behind another element.?

    Michael
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 01 May 2013 Link to this post

    Hi,

    By default RadWidnow has z-index of 3000. When it is dragged it increases its z-izndex with 1, to ensure that the active RadWindow will be always on top. In that article http://www.telerik.com/help/aspnet-ajax/controlling-absolute-positioning-with-zindex.html you could see the default z-index values for all Telerik RadControls.

    The following example shows how you could set a different z-index for RadWidnow and what z-index have to be applied to an element so the Window to be over or behind it:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
         div.RadWindow {
            z-index: 2000 !important;
         }
        </style>
             
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="Scriptmanager1" runat="server" />
        <telerik:RadWindow runat="server" VisibleOnPageLoad="true" Width="300" Height="300">
        </telerik:RadWindow>
        <div style="width: 500px; height: 500px; position: absolute; z-index: 3000 !important; top: 0; left: 0; background: red;"></div>
        <div style="width: 500px; height: 500px; position: absolute; z-index: 1000 !important; top: 0; right: 0; background: blue;"></div>
        </form>
    </body>
    </html>

    Just drag the Window and check how it goes behind the Red and goes over the Blue elements.

    Kind regards,
    Bozhidar
    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. Michael
    Michael avatar
    43 posts
    Member since:
    Mar 2013

    Posted 01 May 2013 Link to this post

    That is what I needed! Thanks!
Back to Top