New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

RadEditor in Full Screen Mode is Hidden Behind other Elements

Description

Sometimes, when you put the RadEditor for ASP.NET AJAX control in Full Screen Mode, you will experience issues similar to the following:

  • you do not see the toolbar or parts of it
  • you do not see the entire content area
  • you do not see the modules or any other part of the control

Such issues stem from HTML elements in the page that have some special positioning (e.g., position: absolute) and a z-index set. For example, the following mockup of a header menu will partially hide the editor's toolbar:

<div style="position: absolute; z-index: 12345; background-color: yellow;">A header menu</div>
<div style="position: absolute; left: 100px; top: 100px;">
    <telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>
</div>

Solution

To fix that, you need to provide similar special positioning and a proper z-index to the RadEditor control.

For Telerik UI for ASP.NET AJAX Q2 2015 and later, add the following CSS rule:

/* Q2 2015 and later */
.reFullScreen
{
    position: absolute;
    z-index: 987654; /* set the value required by your concrete layout and case */
}

For Telerik UI for ASP.NET AJAX prior to Q2 2015, you need to add a CSS class that distinguishes the full screen mode with a few lines of JavaScript. For example:

/* Prior to Q2 2015 */
.fullScreenEditorZIndex
{
    position: absolute;
    z-index: 987654; /* set the value required by your concrete layout and case */
}

where this class is added with some scripts:

<div style="position: absolute; z-index: 12345; background-color: yellow;">A header menu</div>
<div style="position: absolute; left: 100px; top: 100px;">
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuted="OnClientCommandExecuted"></telerik:RadEditor>
</div>
<script>
    function OnClientCommandExecuted(sender, args) {
        if (args.get_commandName() == "ToggleScreenMode") {
            //Only needed for versions prior to Q2 2015
            $telerik.$(sender.get_element()).toggleClass("fullScreenEditorZIndex");
        }
    }
</script>
In this article