RadWindow painting problem - various browsers

3 posts, 1 answers
  1. KK60
    KK60 avatar
    12 posts
    Member since:
    Apr 2010

    Posted 23 Feb 2014 Link to this post

    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.

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 24 Feb 2014 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. KK60
    KK60 avatar
    12 posts
    Member since:
    Apr 2010

    Posted 24 Feb 2014 in reply to Marin Bratanov Link to this post

    Well, clearing the cache on each browser seems to have worked.  Now they all display the borders and title bar correctly.  Thanks.  Odd indeed.  :) 
Back to Top