I have just run across this issue due to work we are doing for cross-browser compatibility. I use the following code to display a confirmation dialog:
​Confirmation Dialog .ASPX:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AdminExecuteConfirmDialog.aspx.cs" Inherits="FEUserAdmin.dialogs.AdminExecuteConfirmDialog" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head id="headAdminExecuteConfirmDialog" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE"/>
<title>Sabre Admin Confirmation Message</title>
<link href="./../css/AdminWeb.css" rel="stylesheet" type="text/css" />
<link href="./../skins/WLSmall/Ajax.WLSmall.css" rel="stylesheet" type="text/css" />
<link href="./../skins/WLLarge/Ajax.WLLarge.css" rel="stylesheet" type="text/css" />
<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
<script type="text/javascript" language="javascript" src="./../js/AdminWeb.js"></script>
<style type="text/css">
html
{
overflow:hidden;
}
</style>
</head>
<body>
<form id="formAdminExecuteConfirmDialog" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="500"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" MinDisplayTime="500" Skin="WLSmall" EnableEmbeddedSkins="false" ></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel3" runat="server" MinDisplayTime="500" Skin="WLLarge" EnableEmbeddedSkins="false" ></telerik:RadAjaxLoadingPanel>
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Web20"></telerik:RadSkinManager>
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Web20"/>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript" language="javascript">
function GetRadWindow()
{
var oWnd = null;
if (window.radWindow)
oWnd = window.radWindow;
else if (window.frameElement.radWindow)
oWnd = window.frameElement.radWindow;
return oWnd;
}
function DialogClose()
{
var oWnd = GetRadWindow();
oWnd.close();
}
</script>
</telerik:RadCodeBlock>
<center>
<div>
<table id="tblAWECControls" cellspacing="0" cellpadding="2" rules="none" border="0" class="sfecua_table_noborder" width="100%" style="table-layout:fixed">
<tr style="vertical-align:top; width:100%">
<td align="left" style="width:100%; white-space:normal">
<div id="divValidationResults" style="height:115px; overflow-y:hidden">
<asp:TextBox ID="tbAWECExecuteConfirmMessage" runat="server" BorderStyle="None" CssClass="sfecua_label_headingCenterMedium" Rows="8" ReadOnly="True" Width="95%" TextMode="MultiLine"></asp:TextBox>
</div>
</td>
</tr>
<tr style="vertical-align:top; width:100%">
<td align="center" style="width:100%; white-space:nowrap">
<hr style="width:95%" />
</td>
</tr>
<tr style="vertical-align:top; width:100%">
<td align="center" style="width:100%; white-space:nowrap">
<telerik:RadButton ID="btnAWECCloseDialog" runat="server" AutoPostBack="false" Text="Close" Width="95%" OnClientClicked="DialogClose"></telerik:RadButton>
</td>
</tr>
</table>
</div>
</center>
</form>
</body>
</html>
From Parent Page:
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" KeepInScreenBounds="true" ReloadOnShow="true" ShowContentDuringLoad="false" Skin="Web20" VisibleStatusbar="false">
<Windows>
<telerik:RadWindow ID="rwValidationResults" Modal="true" Width="460px" Height="252px" Behaviors="Close" ></telerik:RadWindow>
<telerik:RadWindow ID="rwExecuteConfirm" Modal="true" Width="320px" Height="220px" Behaviors="Close" ></telerik:RadWindow>
<telerik:RadWindow ID="rwExecuteError" Modal="true" Width="320px" Height="220px" Behaviors="Close" ></telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
Invoked By:
var objECWindow = radopen('./../dialogs/AdminExecuteConfirmDialog.aspx?ConfirmMessage=' + strExecuteConfirmMessage, 'rwExecuteConfirm');
----
This displays as expected in IE11, but is painted without borders and without a title bar background (and corner icons) in the current versions of FireFox and Chrome based browsers (Chromium, Opera.)
Please see attached screenshots. Any suggestions would be greatly appreciated.
​Confirmation Dialog .ASPX:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AdminExecuteConfirmDialog.aspx.cs" Inherits="FEUserAdmin.dialogs.AdminExecuteConfirmDialog" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head id="headAdminExecuteConfirmDialog" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE"/>
<title>Sabre Admin Confirmation Message</title>
<link href="./../css/AdminWeb.css" rel="stylesheet" type="text/css" />
<link href="./../skins/WLSmall/Ajax.WLSmall.css" rel="stylesheet" type="text/css" />
<link href="./../skins/WLLarge/Ajax.WLLarge.css" rel="stylesheet" type="text/css" />
<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
<script type="text/javascript" language="javascript" src="./../js/AdminWeb.js"></script>
<style type="text/css">
html
{
overflow:hidden;
}
</style>
</head>
<body>
<form id="formAdminExecuteConfirmDialog" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="500"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" MinDisplayTime="500" Skin="WLSmall" EnableEmbeddedSkins="false" ></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel3" runat="server" MinDisplayTime="500" Skin="WLLarge" EnableEmbeddedSkins="false" ></telerik:RadAjaxLoadingPanel>
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Web20"></telerik:RadSkinManager>
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Web20"/>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript" language="javascript">
function GetRadWindow()
{
var oWnd = null;
if (window.radWindow)
oWnd = window.radWindow;
else if (window.frameElement.radWindow)
oWnd = window.frameElement.radWindow;
return oWnd;
}
function DialogClose()
{
var oWnd = GetRadWindow();
oWnd.close();
}
</script>
</telerik:RadCodeBlock>
<center>
<div>
<table id="tblAWECControls" cellspacing="0" cellpadding="2" rules="none" border="0" class="sfecua_table_noborder" width="100%" style="table-layout:fixed">
<tr style="vertical-align:top; width:100%">
<td align="left" style="width:100%; white-space:normal">
<div id="divValidationResults" style="height:115px; overflow-y:hidden">
<asp:TextBox ID="tbAWECExecuteConfirmMessage" runat="server" BorderStyle="None" CssClass="sfecua_label_headingCenterMedium" Rows="8" ReadOnly="True" Width="95%" TextMode="MultiLine"></asp:TextBox>
</div>
</td>
</tr>
<tr style="vertical-align:top; width:100%">
<td align="center" style="width:100%; white-space:nowrap">
<hr style="width:95%" />
</td>
</tr>
<tr style="vertical-align:top; width:100%">
<td align="center" style="width:100%; white-space:nowrap">
<telerik:RadButton ID="btnAWECCloseDialog" runat="server" AutoPostBack="false" Text="Close" Width="95%" OnClientClicked="DialogClose"></telerik:RadButton>
</td>
</tr>
</table>
</div>
</center>
</form>
</body>
</html>
From Parent Page:
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" KeepInScreenBounds="true" ReloadOnShow="true" ShowContentDuringLoad="false" Skin="Web20" VisibleStatusbar="false">
<Windows>
<telerik:RadWindow ID="rwValidationResults" Modal="true" Width="460px" Height="252px" Behaviors="Close" ></telerik:RadWindow>
<telerik:RadWindow ID="rwExecuteConfirm" Modal="true" Width="320px" Height="220px" Behaviors="Close" ></telerik:RadWindow>
<telerik:RadWindow ID="rwExecuteError" Modal="true" Width="320px" Height="220px" Behaviors="Close" ></telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
Invoked By:
var objECWindow = radopen('./../dialogs/AdminExecuteConfirmDialog.aspx?ConfirmMessage=' + strExecuteConfirmMessage, 'rwExecuteConfirm');
----
This displays as expected in IE11, but is painted without borders and without a title bar background (and corner icons) in the current versions of FireFox and Chrome based browsers (Chromium, Opera.)
Please see attached screenshots. Any suggestions would be greatly appreciated.
2 Answers, 1 is accepted
0
Accepted
Hello,
This is an odd issue and I would advise first going through this article: http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-missing-borders-titlebar-and-commands.html. Most likely, something is blocking webresource requests in the problematic browsers, so either finding what that is, or using the CDN should help.
You can also look into using the lightweight rendermode because it uses less image spites for backgrounds, so this issue is less likely to manifest: http://www.telerik.com/help/aspnet-ajax/window-render-modes.html.
Regards,
Marin Bratanov
Telerik
This is an odd issue and I would advise first going through this article: http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-missing-borders-titlebar-and-commands.html. Most likely, something is blocking webresource requests in the problematic browsers, so either finding what that is, or using the CDN should help.
You can also look into using the lightweight rendermode because it uses less image spites for backgrounds, so this issue is less likely to manifest: http://www.telerik.com/help/aspnet-ajax/window-render-modes.html.
Regards,
Marin Bratanov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
KK60
Top achievements
Rank 1
Rank 1
answered on 24 Feb 2014, 09:30 PM
Well, clearing the cache on each browser seems to have worked. Now they all display the borders and title bar correctly. Thanks. Odd indeed. :)