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

RadWindow height incorrect in Opera

4 Answers 92 Views

Window

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

Sean asked on 06 Sep 2011, 11:22 PM

Opera.png

Chrome.png

Hi Telerik,

I see all of my RadWindows sized improperly, but only when rendered under the Opera browser.

Browser Information:

Version

11.51

Build

1087

Platform

Win32

System

Windows 7

XHTML+Voice

Plug-in not loaded

Browser identification

Opera/9.80 (Windows NT 6.1; U; Edition United States Local; en) Presto/2.9.168 Version/11.51

Relevant code-behind:

<telerik:RadWindowManager ID="RadWindowManager1" Runat="Server" Skin="Web20" Modal="True" KeepInScreenBounds="True" EnableShadow="True" Behaviors="Close, Move" VisibleStatusbar="False" ReloadOnShow="True" ShowContentDuringLoad="False" Behavior="Close, Move" Title="Confirm Action" IconUrl="~/Content/Dashboard/Icons/radwindow_confirmdelete.png">

<Windows>

<telerik:RadWindow ID="UploadDashboardWindow" Runat="Server" NavigateUrl="~/Dashboard/Dialog/Windows/UploadDashboard.aspx" IconUrl="~/Content/Dashboard/Icons/drive-upload.png" OnClientClose="OnUploadDashboardClose" OnClientAutoSizeEnd="OnClientAutoSizeEnd" Title="Upload Dashboard" Height="100" ReloadOnShow="False" />

</Windows>

</telerik:RadWindowManager>

<%@ Page Language="C#" EnableViewState="False" AutoEventWireup="True" CodeBehind="UploadDashboard.aspx.cs" Inherits="CableSolve.Web.Dashboard.Dialog.Windows.UploadDashboard" %>

<!DOCTYPE html>

<html lang="en">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<link rel="stylesheet" type="text/css" href="../../../Content/Dashboard/UploadDashboard.css" />

<telerik:RadCodeBlock ID="RadCodeBlock1" Runat="Server" >

<script type="text/javascript">

var radUpload1ID = "<%= RadUpload1.ClientID %>";

</script>

</telerik:RadCodeBlock>

<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">

<CompositeScript>

<Scripts>

<asp:ScriptReference Path="~/Scripts/Dashboard/UploadDashboard.js" />

<asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" />

</Scripts>

</CompositeScript>

</telerik:RadScriptManager>

<telerik:RadFormDecorator ID="RadFormDecorator1" Runat="server" DecoratedControls="All" Skin="Web20" />

<fieldset id="Upload Dashboard">

<legend>Upload Dashboard</legend>

<telerik:RadUpload ID="RadUpload1" Runat="server" AllowedFileExtensions=".xml" Skin="Web20" MaxFileInputsCount="1" ControlObjectsVisibility="None" Height="40px" Width="230px" BorderWidth="0px" >

</telerik:RadUpload>

<div class="BottomButton">

<telerik:RadButton ID="RadButton1" Runat="server" Skin="Web20" Text="Upload" OnClick="RadButton1_Click" OnClientClicked="CloseAndSave" />

</div>

</fieldset>

</form>

</body>

</html>

html, form, body

{

font-size: 12px;

font-family: "segoe ui",arial,sans-serif;

overflow: hidden;

}

.LabelEnabled

{

color: Black !important;

}

.LabelDisabled

{

color: Gray !important;

}

.riTextBox

{

color: Black !important;

}

.BottomButton

{

margin-top: 35px;

margin-left: 88px;

margin-bottom: 5px;

}

.RadUpload .ruFileInput,

.RadUpload .ruFakeInput,

.RadUpload .ruBrowse

{

cursor: pointer !important;

}

I have attached two images to this post. They are screenshots of Chrome vs Opera for the code mentioned above. The window that I am showing in the screenshots opens up smaller than anticipated in Opera. Other RadWindows I have open larger than anticipated.

I did some searching on the Telerik forums, and found this link from 2009. I am not sure if this discussion is still applicable current day, however. If so, does Telerik have any suggestions on best practice for handling this scenario?

Cheers,

Sean

4 Answers, 1 is accepted

answered on 07 Sep 2011, 05:21 PM

Kevin,

Ahh, you know what, you're correct. In speaking with Telerik I did, in fact, learn this -- it seems that perhaps Opera works a bit differently and isn't 'forced' to hold an iframe smaller than 150px.

So, here's what I've got to report now:

If I set the window discussed previously to a height of 150px the INITIAL height of the window looks correct. BUT, if I open the window a second time it sizes improperly and becomes too small. BUT, if I remove "ReloadOnShow = false", and force it to reload every time, it sizes properly every time. This is not a big deal to me as I think I'm going to be reworking the window (today?).

How about for this window? It is sizing too large -- I suspect the same fix could be applied to all the windows which size too large.

<telerik:RadWindow ID="CustomLocalSettingsWindow" Runat="Server" NavigateUrl="~/Dashboard/Dialog/Windows/CustomLocalSettings.aspx" OnClientShow="OnLocalSettingsShow" OnClientClose="OnCustomLocalSettingsClose" IconUrl="~/Content/Dashboard/Icons/radwindow_settings.png" OnClientAutoSizeEnd="OnClientAutoSizeEnd" Title="Settings" Width="450px" Height="215px" />

// When a dialog window appears on the page, it does not automatically

// keep itself centered. If the user resizes the browser window, the

// dialog window may drop off the screen. This method keeps dialog windows shown.

function OnClientAutoSizeEnd(dialogWindow) {

if( dialogWindow && dialogWindow.isVisible ) dialogWindow.center();

}

<%@ Page Language="C#" EnableViewState="False" AutoEventWireup="True" CodeBehind="CustomLocalSettings.aspx.cs" Inherits="CableSolve.Web.Dashboard.Dialog.Windows.CustomLocalSettings" %>

<!DOCTYPE html>

<html lang="en">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<link rel="stylesheet" type="text/css" href="../../../Content/Dashboard/CustomLocalSettings.css" />

<telerik:RadScriptManager ID="RadScriptManager1" Runat="server" EnablePageMethods="True">

<CompositeScript>

<Scripts>

<asp:ScriptReference Path="~/Scripts/Dashboard/CustomLocalSettings.js" />

<asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" />

</Scripts>

</CompositeScript>

</telerik:RadScriptManager>

<telerik:RadFormDecorator ID="RadFormDecorator1" Runat="server" DecoratedControls="All" Skin="Web20" />

<telerik:RadAjaxManager ID="RadAjaxManager1" Runat="server" UpdatePanelsRenderMode="Inline">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="CheckBox1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadNumericTextBox1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadButton1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadButton1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" Runat="server">

<script type="text/javascript">

var radNumericTextBox1ID = "<%= RadNumericTextBox1.ClientID %>";

var radComboBox1ID = "<%= RadComboBox1.ClientID %>";

var checkBox1ID = "<%= CheckBox1.ClientID %>";

</script>

</telerik:RadCodeBlock>

<fieldset id="RefreshProperties">

<legend>Refresh Settings</legend>

<div id="RefreshArea">

<div id="RefreshLeftSide">

Auto-Refresh Enabled:

<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox1_CheckedChanged" />

</div>

<div id="RefreshRightSide">

<telerik:RadNumericTextBox ID="RadNumericTextBox1" Runat="server" Label="Auto-Refresh Interval (Minutes):" MaxValue="60" MinValue="1" ShowSpinButtons="True" Value="1" Width="225px" Enabled="False" LabelCssClass="riLabel LabelDisabled" DataType="System.Int32">

<NumberFormat DecimalDigits="0" AllowRounding="False" />

</telerik:RadNumericTextBox>

</div>

</fieldset>

<fieldset id="ChartProperties">

<legend>Chart Properties</legend>

<telerik:RadComboBox ID="RadComboBox1" Runat="server" Skin="Web20" >

<Items>

<telerik:RadComboBoxItem Runat="server" Text="Bar Chart" Value="BarChart" />

<telerik:RadComboBoxItem Runat="server" Text="Stacked Bar Chart" Value="StackedBarChart" />

</Items>

</telerik:RadComboBox>

</fieldset>

<div class="BottomButton">

<telerik:RadButton ID="RadButton1" runat="server" Skin="Web20" Text="Apply" OnClientClicked="CloseAndSave" />

</div>

</form>

</body>

</html>

body

{

font-size: 12px;

font-family: "segoe ui",arial,sans-serif;

}

HTML

{

overflow: hidden;

}

.LabelEnabled

{

color: Black !important;

}

.LabelDisabled

{

color: Gray !important;

}

.riTextBox

{

color: Black !important;

}

.BottomButton

{

padding-top: 7px;

margin-left: 170px;

padding-bottom: 7px;

}

.ChartProperties

{

height: 45px;

width: 160px;

padding-right: 10px;

}

.RefreshProperties

{

height: 46px;

width: 380px;

padding-right: 10px;

}

#RefreshArea

{

padding: 2px;

}

#RefreshLeftSide

{

text-align: center;

float: left;

clear: none;

margin-top: 3px;

}

#RefreshRightSide

{

text-align: center;

float: left;

clear: none;

margin-left: 5px;

}

answered on 08 Sep 2011, 04:11 PM

Hi Sean,

On the link to the old forum post - yes, this is still valid, under Opera there are issues with iframes nested in tables and therefore the size of the RadWIndow is larger than expected. So far we have not found a viable solution for this and Opera's debugging tools are far from excellent.

As for the last code you sent - the RadWindow that is too-large in Opera - this is exactly the issue that is discussed in the previous post you linked and there is still no workaround for this. The good news is that it works correctly in all other browsers (the RadWIndow's height is 215px) and Opera's market share is about 2%. To answer the explicit question - no, I do not see anything wrong with the code. Maybe only the isVisible check, isClosed could be a little more robust sometimes.

On the original code you sent - indeed, I was able to observe this behavior, but I am sorry to say that I cannot provide any further information on the origins of this behavior (see the old post I am mentioning for the third time already I think). Since setting the ReloadOnShow to true provides consistent results (although a little wrong in Opera) I would advise that you keep it this way.

What I can say in conclusion is that we are aware of the sizing issue in Opera, we are working on it and once a solution is found it will immediately be incorporated in the code.

Regards,
Marin
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>