This is a migrated thread and some comments may be shown as answers.

radWindow with Overlay in Firefox

2 Answers 158 Views
Window
This is a migrated thread and some comments may be shown as answers.
Nick Jensen
Top achievements
Rank 1
Nick Jensen asked on 30 Mar 2011, 10:14 PM
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.

Nick

2 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 05 Apr 2011, 09:48 AM
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">
    <title></title>
    <style type="text/css">
        .overlayCSS
        {
            background-color: Black !important;
        }
    </style>
</head>
<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");
        }
      
    </script>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadWindow ID="RadWindow1" runat="server" Skin="Black" OnClientShow="OnClientShow"
        VisibleOnPageLoad="true" Overlay="true">
    </telerik:RadWindow>
    </form>
</body>
</html>

  
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,
Svetlina
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
0
gim.net
Top achievements
Rank 1
answered on 18 Apr 2013, 03:31 PM
Worked well for me as well.

Just replaced the black with transparent.
Tags
Window
Asked by
Nick Jensen
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
gim.net
Top achievements
Rank 1
Share this question
or