Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Window / Control is shown behind a heavy-weight object (PDF, Flash, ActiveX, etc)

Control is shown behind a heavy-weight object (PDF, Flash, ActiveX, etc)

Article Info

Rating: 5

Article information

Article relates to

 RadColorPicker for ASP.NET AJAX,
 RadToolTip for ASP.NET AJAX,
 RadWindow for ASP.NET AJAX

Created by

 Svetlina, Telerik


Problem : Control is shown behind a heavy-weight object (PDF, Flash, ActiveX, etc)
SOLUTION:



When there are heavy weight objects on the page, such as PDF, Flash, ActiveX objects, a standard HTML element like DIV cannot be shown above them. Since the RadControls are complex HTML and they are formed by standard elements, they also show behind such object in this case.

In order to solve this problem, they provide a property called Overlay (the default value is false) - when it is set to true, the controls are correctly displayed. What this property actually does is to create an overlay IFRAME element which is displayed below the control in order to ensure its correct display.

Controls which have this property are controls with popup behavior as RadColorPicker, RadWindow (including RadWindowManager and predefined radalert, radconfirm and radprompt dialogs), RadToolTip (including RadToolTipManager).

You can test the difference in the display by removing the Overlay setting from the following code:

<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
  
        <script type="text/javascript">
          
        function ShowRadAlert()
        {
           radalert("RadAlert message called!", 200, 150, "RadAlert message");
        }
          
        </script>
  
        <telerik:RadColorPicker ID="RadColorPicker1" Overlay="true" runat="server" ShowIcon="true">
        </telerik:RadColorPicker>
        <asp:Button ID="btn" runat="server" OnClientClick="ShowRadAlert(); return false;"
            Text="Show radalert" />
        <telerik:RadToolTip ID="RadToolTip1" runat="server" Overlay="true" TargetControlID="btn"
            Height="400" Text="Show RadAlert message">
        </telerik:RadToolTip>
        <br />
        <br />
        <br />
        <telerik:RadWindow ID="RadWindow1" runat="server" Overlay="true" Left="120" Top="150"
            VisibleOnPageLoad="true" NavigateUrl="http://www.google.com">
        </telerik:RadWindow>
        <telerik:RadWindowManager ID="RadWindowManager1" Overlay="true" runat="server">
        </telerik:RadWindowManager>
        <iframe id="iframe1" runat="server" src="AlbertEinstein.pdf" style="width: 700px;
            height: 800px;"></iframe>
    </form>
</body>
</html>


NOTE: The RadToolTip and RadToolTipManager controls started providing Overlay property after the Q3 2009 (2009.3.1208) release and the property is available for them only in later internal builds and official releases.


You can find a sample demo attached.

Files

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.