radWindow with Overlay in Firefox

3 posts, 0 answers
  1. Nick Jensen
    Nick Jensen avatar
    17 posts
    Member since:
    Jun 2006

    Posted 30 Mar 2011 Link to this post

    I have just upgraded to a new version of Telerik.Web.UI (version 2011.1.315.35), and my radWindows (which generally have Overlay="true") now have white corners when viewed in Firefox 4 (but not in IE8 or Chrome). This is because the overlay iframe has background-color: rbg(255, 255, 255) as an inline style element for Firefox, but not the other browsers. I can't work out why or where this is being set.

    If I set Overlay="false" the white corners of course disappear, but this is not a good solution.

    Any ideas as to why this has been introduced, and how I can work around it? The overlay iframe does not appear to have a class, so I'm not sure how to override it in css.

  2. Svetlina Anati
    Svetlina Anati avatar
    2795 posts

    Posted 05 Apr 2011 Link to this post

    Hi Nick,

    Indeed, the edges of the overlay iframe could be visible in some scenarios. However, we have tried to hide it (e.g there is one filter set) but if we set the opacity directly or set a transparent background color, the heavy weight object does not get hidden below it. That is why the solution we can provide for this case is to reference the iframe and set its background color to be the same as the below content e.g as shown below:

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <style type="text/css">
                background-color: Black !important;
    <body style="background: black">
        <form id="form1" runat="server">
        <script type="text/javascript">
            function OnClientShow(sender, args) {
                var overlay = sender.get_popupElement()._hideWindowedElementsIFrame;
                if (!overlay) return;
                Sys.UI.DomElement.addCssClass(overlay, "overlayCSS");
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <telerik:RadWindow ID="RadWindow1" runat="server" Skin="Black" OnClientShow="OnClientShow"
            VisibleOnPageLoad="true" Overlay="true">

    I hope that my suggestion is helpful and for your convenience I attached a sample demo page - let me know how it goes.

    All the best,
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
  4. Eli
    Eli avatar
    4 posts
    Member since:
    Jan 2011

    Posted 18 Apr 2013 Link to this post

    Worked well for me as well.

    Just replaced the black with transparent.
Back to Top