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:



NOTE: Since only <iframe> nodes can be shown above heavyweight elements, the Modal background RadWindow and RadToolTip offer will stay behind the heavyweight element as well. You can inspect the rendered overlay iframe and add a similar one in your markup so you can position it behind the modal background, but it will not be semi-transparent because if it were, it would not stay on top of the heavyweight object.

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.