What's the standard way to open windows with different dimensions based on browser?

[Sean]

Hi Telerik,

I am just doing some fine-tuning of my controls, and I noticed that there are slight differences in how some of my pop-up RadWindows are rendered under different browsers. I've accounted for all that I can, but I would like to open a RadWindow with a different height, as cleanly as possible, but be able to account for these browser differences.

Currently, I have the following implementation:

<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" OnClientDragStart="OnWindowDrag" Style="z-index: 90001 !important">
    <Windows>
        <telerik:RadWindow ID="DashboardGlobalSettingsWindow" Runat="Server" NavigateUrl="~/Dashboard/Dialog/Windows/DashboardGlobalSettings.aspx" OnClientShow="OnDashboardGlobalSettingsShow" OnClientClose="OnDashboardGlobalSettingsClose" IconUrl="~/Content/Dashboard/Icons/radwindow_settings.png" OnClientAutoSizeEnd="OnClientAutoSizeEnd" Title="Global Settings" MinHeight="337px" Height="337px" Width="450px" />
    </Windows>
</telerik:RadWindowManager>

//Shows the global settings window -- dock isn't relevant here.
//I cancel the event because I'm making it look like a button on the side when it is really
//a sliding zone that would expand. When I cancel the slide event, though, it's a button!
function ShowDashboardGlobalSettings(sender, eventArgs) {
    eventArgs.set_cancel(true);
    oWindow = radopen(null, "DashboardGlobalSettingsWindow");
}

//Pass current tabs to the dialog window.
function OnDashboardGlobalSettingsShow(sender) {
    sender.argument = $find(radTabStrip1ID).get_tabs();
}

//Pass tabs back to dashboard.
function OnDashboardGlobalSettingsClose(sender) {
    var globalJSONAttributes = sender.argument;
    if (globalJSONAttributes != null) {
        __doPostBack(radTabStrip1UniqueID, $.toJSON(globalJSONAttributes));
    }
    oWindow = null;
}

Should I parse the browser information where I obtain a handle on the oWindow, and then set the height as necessary? 

Thanks

EDIT: Just for the sake of keeping similar questions in one thread, could you guys also take a look at this?

<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="200px"/>

function ShowLocalSettings(dock) {
    radDock = dock; //Maintain a hold on the dock that is pulling up the window. Useful to save info when window closes.

    var reportType = radDock.get_element().getAttribute("ReportType");
    if (reportType == "HistoricalReport") {
        oWindow = window.radopen(null, "HistoricalLocalSettingsWindow");
    }
    else if (reportType == "CustomReport") {
        oWindow = window.radopen(null, "CustomLocalSettingsWindow");

        if ($.browser.opera) {
            alert("test");
            oWindow.set_height(oWindow.get_height() - 45);
        }

    }
    else {
        window.radalert("Didn't find report type.");
    }
}

http://screencast.com/t/905DDs2rgM

There's a short video clip of what I am seeing. Basically, setting the oWindow's height like so (to fix height issues in Opera), is causing the next click to make the window even smaller. Yet, I only see the alert fire once (not in the video, but tested). Even calling set_height using a hard-coded value not dependent on get_height causes the same effect. Not calling set_height at all does not cause the effect, though. This seems like a bug in set_height. Any idea why this would be happening?

It doesn't happen when I have AutoSize="True" and AutoSizeBehvaiors="Height", however I think that's just hiding the bug.

[Marin Bratanov]

Hello Sean,

The only difference in the dimensions of the RadWindow we are aware of is that the height in Opera is a bit larger when the NavigateUrl is used. I believe we have discussed it in another thread and the situation has not changed - there is currently no workaround for this height. There is also another browser behavior related to heights - only IE allows an iframe nested in a table to be smalled than 150px and we take this into account, so only under IE can the RadWindow be resized so such small height when the NavigateUrl is used.

This means that you do not need to account for different browsers when showing the RadWindow - its height will be correct in all major browsers. As for Opera - my advise is to leave the extra height, as this issue stems from a browser limitation on the HTML elements' sizes and not from the JavaScript we use to set them. Therefore subtracting some height may result in some unpredictable behavior. This also applies for the code you have tried to set the height, which I advise that you remove. As for the autosizing - it works differently than simply setting the height via the set_height() method and this is the reason why different behavior is experienced.


In conclusion - the RadWindow is cross-browser compatible and its dimensions are set correctly in all major browsers. The only exception is Opera where the height is a bit larger and this is a browser issue that we have not been able to resolve so far. Please accept our apologies for the inconvenience. My advise on the matter is to let this be.


Kind regards,
Marin
the Telerik team

[Sean]

Hi Marin,

Thank you for your detailed response! Indeed we have discussed the sizing issues under Opera, I just thought there'd be a decent way into tricking it into rendering smaller. I might play around with expanding the padding around controls to make the dialog window look "best as possible" under Opera.

Anyway, regarding the whole sizing issue. I ended up realizing there was a larger problem than the sizing of the RadWindows. I pulled open Paint, and found that non-autosizing windows were the same height. They just looked weird because of some padding issues. I was able to resolve this on my non-autosizing windows.

However, I have not been able to resolve this issue on a slightly more complex, auto-size enabled window. Hopefully you can help me out! I did my best to condense all the CSS, and played around with it for a few hours. All the padding and stuff seems correct when I inspect the elements... I tried setting overflow: auto in places, and setting display: block in places... just generally tinkered with things that could affect padding, but to no avail.

body
{
    font-size: 12px;
    font-family: "segoe ui",arial,sans-serif;
    overflow: hidden;
    width: 404px;
}

.rfdHeight94 .rfdRoundedOuter, .rfdHeight94 .rfdRoundedInner
{
    height: 85px !important;
}

.rfdHeight94 .rfdTD94 .rfdRoundedInner
{
    height: 87px !important;
}

.rfdHeight70 .rfdRoundedOuter, .rfdHeight70 .rfdRoundedInner
{
    height: 62px !important;
}

.rfdHeight70 .rfdTD70 .rfdRoundedInner
{
    height: 63px !important;
}

.LabelEnabled,
.riLabel .LabelEnabled,
.riTextBox
{
    color: Black !important;
}

.LabelDisabled,
.riLabel .LabelDisabled
{
    color: Gray !important;
}

.BottomButton
{
    padding: 7px 0px;
    margin-left: 170px;
}

#RefreshArea
{
    padding: 2px;
}

#RefreshLeftSide
{
    float: left;
    margin-top: 3px;
}

#RefreshRightSide
{
    float: left;
    margin-left: 5px;
}

.rfdRoundedWrapper_fieldset
{
    display: block\9 !important;
}

#RefreshArea,
#ChartArea
{
    overflow: auto;
    margin: 3px 5px 5px 5px\9;
}

._Telerik_IE9 #RefreshArea,
._Telerik_IE9 #ChartArea
{
    margin: 0px;
}

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

<!DOCTYPE html>
<html lang="en">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptBlock ID="RadScriptBlock1" Runat="Server" >
                <link rel="stylesheet" type="text/css" href="../../../Content/Dashboard/HistoricalLocalSettings.css?t=<%= DateTime.Now.Ticks %>" />
            </telerik:RadScriptBlock>
            <telerik:RadScriptManager ID="RadScriptManager1" Runat="server" EnablePageMethods="True">
                <CompositeScript>
                    <Scripts>
                        <asp:ScriptReference Path="~/Scripts/Dashboard/HistoricalLocalSettings.js" />
                        <asp:ScriptReference Path="~/Scripts/jquery-1.4.1.js" />
                    </Scripts>
                </CompositeScript>
            </telerik:RadScriptManager>
            <telerik:RadFormDecorator ID="RadFormDecorator1" Runat="server" DecoratedControls="All" Skin="Web20" />

            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline" RequestQueueSize="4">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="CheckBox1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadNumericTextBox1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="CheckBox2">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="CheckBox2" />
                        </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 radDateTimePicker1ID = "<%= RadDateTimePicker1.ClientID %>";
                    var radDateTimePicker2ID = "<%= RadDateTimePicker2.ClientID %>";
                    var checkBox1ID = "<%= CheckBox1.ClientID %>";
                    var checkBox2ID = "<%= CheckBox2.ClientID %>";
                    var checkBox3ID = "<%= CheckBox3.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>
                </div>
            </fieldset>

            <fieldset id="ChartProperties">
                <legend>Chart Properties</legend>
                <div id="ChartArea">
                    <telerik:RadComboBox ID="RadComboBox1" Runat="server" Skin="Web20" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged">
                        <Items>
                            <telerik:RadComboBoxItem Runat="server" Text="Line Chart" Value="LineChart" />
                            <telerik:RadComboBoxItem Runat="server" Text="Pie Chart" Value="PieChart" />
                        </Items>
                    </telerik:RadComboBox>
                    <table>
                        <tr>
                            <td class="TimeframeRestricted">
                                Timeframe Restricted:</td>
                            <td class="TimeframeCheckbox">
                               <asp:CheckBox ID="CheckBox2" Runat="server" AutoPostBack="True" oncheckedchanged="CheckBox2_CheckedChanged" />
                            </td>
                            <td class="TimeframeDateTimePickers">
                                <telerik:RadDateTimePicker ID="RadDateTimePicker1" Runat="server" Skin="Web20" Enabled="False" Culture="en-US" EnableTyping="False">
                                    <TimeView Runat="server" CellSpacing="-1" />
                                    <TimePopupButton ImageUrl="" HoverImageUrl="" />
                                    <Calendar Runat="server" Skin="Web20" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x" />
                                    <DateInput Runat="server" DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy" readonly="True" />
                                    <DatePopupButton ImageUrl="" HoverImageUrl="" />
                                    <ClientEvents OnPopupClosing="OnPopupClosing" OnPopupOpening="OnPopupOpening" />
                                </telerik:RadDateTimePicker>
                            </td>
                        </tr>
                        <tr>
                            <td class="DataPointsShown" >
                                <span id="HideLabelWhenDecorated">
                                    <asp:Label ID="Label2" Runat="server" Text="Data Points Shown:" />
                                </span>
                            </td>
                            <td >
                                <span id="HideCheckBoxWhenDecorated">
                                    <asp:CheckBox ID="CheckBox3" Runat="server" />
                                </span>
                            </td>
                            <td class="TimeframeDateTimePickers">
                                <telerik:RadDateTimePicker ID="RadDateTimePicker2" Runat="server" Skin="Web20" Enabled="False" Culture="en-US" EnableTyping="False">
                                    <TimeView Runat="server" CellSpacing="-1"/>
                                    <TimePopupButton ImageUrl="" HoverImageUrl=""/>
                                    <Calendar Runat="server" Skin="Web20" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x"/>
                                    <DateInput Runat="server" DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy" ReadOnly="True"/>
                                    <DatePopupButton ImageUrl="" HoverImageUrl=""/>
                                    <ClientEvents OnPopupClosing="OnPopupClosing" OnPopupOpening="OnPopupOpening" />
                                </telerik:RadDateTimePicker>
                            </td>
                        </tr>
                    </table>
                </div>
            </fieldset>

            <div class="BottomButton">
                <telerik:RadButton ID="RadButton1" Runat="server" Skin="Web20" Text="Apply" OnClientClicked="CloseAndSave" />
            </div>
        </form>
    </body>
</html>

There's a fair bit of Javascript behind the scenes. I don't believe it has any impact on the scenario I am describing, but I am going to attach it just in case you need to read through it to verify anything.

var radNumericTextBox1 = null;
var radComboBox1 = null;
var radDateTimePicker1 = null;
var radDateTimePicker2 = null;
var checkBox1 = null;
var checkBox2 = null;
var checkBox3 = null;

//Pass data back to the Dashboard.
function CloseAndSave() {
    var oWindow = GetRadWindow();
    var historicalAttributes = {};

    historicalAttributes["RefreshEnabled"] = checkBox1.checked;
    historicalAttributes["RefreshInterval"] = radNumericTextBox1.get_value();
    historicalAttributes["ChartType"] = radComboBox1.get_value();
    historicalAttributes["TimeRestrictionEnabled"] = checkBox2.checked;
    if (historicalAttributes["TimeRestrictionEnabled"]) {
        if (historicalAttributes["ChartType"] == "LineChart") {
            if (radDateTimePicker1.isEmpty() || radDateTimePicker2.isEmpty()) {
                alert("Please provide values for both dates.");
                return;
            }
            else {
                var date1 = radDateTimePicker1.get_selectedDate();
                var date2 = radDateTimePicker2.get_selectedDate();

                if ((date2 - date1) < 0) {
                    alert("The second date should be past the first.");
                    return;
                }
                //I just chose a date-time formatting. Globalization isn't a big concern here because its not
                //presented to the user.
                historicalAttributes["TimeStart"] = date1.format("MM/dd/yyyy hh:mm:ss tt");
                historicalAttributes["TimeEnd"] = date2.format("MM/dd/yyyy hh:mm:ss tt");
            }
        }
        else if (historicalAttributes["ChartType"] == "PieChart") {
            if (radDateTimePicker1.isEmpty()) {
                alert("Please enter a date.");
                return;
            }
            //I just chose a date-time formatting. Globalization isn't a big concern here because its not
            //presented to the user.
            historicalAttributes["TimeStart"] = radDateTimePicker1.get_selectedDate().format("MM/dd/yyyy hh:mm:ss tt");
            historicalAttributes["TimeEnd"] = null;
        }
    }
    else {
        historicalAttributes["TimeStart"] = null;
        historicalAttributes["TimeEnd"] = null;
    }

    if (checkBox3 != null) {
        historicalAttributes["DataPointsEnabled"] = checkBox3.checked;
    }
    else {
        historicalAttributes["DataPointsEnabled"] = null;
    }

    if (timeout != null) {
        clearTimeout(timeout);
    }

    oWindow.argument = historicalAttributes;
    oWindow.close();
    oWindow.argument = null; //Important because pageLoad gets called once more after oWindow closes.
}

function GetRadWindow() {
    var oWindow = null;
    if (window.radWindow) oWindow = window.radWindow;
    else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
    return oWindow;
}

var formInitializing = false;

function InitializeForm(dockID) {
    return PageMethods.GetDockAttributes(dockID,
        function (json) {
            dockData = $.parseJSON(json);
            formInitializing = true;

            if (dockData["RefreshEnabled"]) {
                checkBox1.checked = true;
                radNumericTextBox1.set_value(dockData["RefreshInterval"]);
                radNumericTextBox1.enable();

                var radNumericTextBox1Label = $get(radNumericTextBox1.get_id() + "_Label");
                radNumericTextBox1Label.className = radNumericTextBox1Label.className.replace(" LabelDisabled", "");
                radNumericTextBox1Label.className += radNumericTextBox1Label.className.indexOf("LabelEnabled") != -1 ? "" : " LabelEnabled";
            }
            radComboBox1.findItemByValue(dockData["ChartType"]).select();

            if (dockData["ChartType"] == "PieChart") {
                document.getElementById('HideLabelWhenDecorated').style.display = 'none';
                document.getElementById('HideCheckBoxWhenDecorated').style.display = 'none';
                radDateTimePicker2.set_visible(false);
            }

            if (dockData["TimeRestrictionEnabled"]) {
                checkBox2.checked = true;

                if (dockData["ChartType"] == "LineChart") {
                    radDateTimePicker1.set_enabled(true);
                    radDateTimePicker2.set_enabled(true);

                    var timeStartString = dockData["TimeStart"];
                    timeStartString = timeStartString.replace('/Date(', ''); //Parse out the serializiation header
                    timeStartString = timeStartString.replace(')/', '');

                    var timeStartDate = new Date();
                    timeStartDate.setTime(timeStartString.substring(0, timeStartString.indexOf('-')));

                    var timeEndString = dockData["TimeEnd"];
                    timeEndString = timeEndString.replace('/Date(', ''); //Parse out the serializiation header
                    timeEndString = timeEndString.replace(')/', '');

                    var timeEndDate = new Date();
                    timeEndDate.setTime(timeEndString.substring(0, timeEndString.indexOf('-')));

                    radDateTimePicker1.set_selectedDate(timeStartDate);
                    radDateTimePicker2.set_selectedDate(timeEndDate);
                    radDateTimePicker1.get_timeView().setTime(timeStartDate.getHours(), timeStartDate.getMinutes(), 0, 0);
                    radDateTimePicker2.get_timeView().setTime(timeEndDate.getHours(), timeEndDate.getMinutes(), 0, 0);
                }
                else if (dockData["ChartType"] == "PieChart") {
                    radDateTimePicker1.set_enabled(true);

                    var timeStartString = dockData["TimeStart"];
                    timeStartString = timeStartString.replace('/Date(', ''); //Parse out the serializiation header
                    timeStartString = timeStartString.replace(')/', '');

                    var timeStartDate = new Date();
                    timeStartDate.setTime(timeStartString.substring(0, timeStartString.indexOf('-')));

                    radDateTimePicker1.set_selectedDate(timeStartDate);
                    radDateTimePicker1.get_timeView().setTime(timeStartDate.getHours(), timeStartDate.getMinutes(), 0, 0);
                }
            }

            if (dockData["DataPointsEnabled"]) {
                checkBox3.checked = true;
            }

            formInitializing = false;
        }
    );
}

function pageLoad() {
    //Find controls early to prevent excess finds.
    radNumericTextBox1 = $find(radNumericTextBox1ID);
    radComboBox1 = $find(radComboBox1ID);
    radDateTimePicker1 = $find(radDateTimePicker1ID);
    radDateTimePicker2 = $find(radDateTimePicker2ID);
    checkBox1 = document.getElementById(checkBox1ID);
    checkBox2 = document.getElementById(checkBox2ID);
    checkBox3 = document.getElementById(checkBox3ID);

    if (timeout != null) {
        clearTimeout(timeout);
    }

    var oWindow = GetRadWindow();
    var dockID = oWindow.argument;

    //Setup how the dialog window looks based on the dock's known settings.
    if (dockID) {
        InitializeForm(dockID);
    }
    else {
        var chartType = radComboBox1.get_value();

        if (chartType == "PieChart") {
            document.getElementById('HideLabelWhenDecorated').style.display = 'none';
            document.getElementById('HideCheckBoxWhenDecorated').style.display = 'none';
            radDateTimePicker2.set_visible(false);
        }
    }

    ValidateWindowState(radComboBox1.get_value());

    oWindow.argument = null;
}

var timeout = null;
//The heavy-hitter for forcing controls to appear/disappear.
function ValidateWindowState(comboBoxSelectedValue) {
    var chartFieldset = document.getElementById('ChartProperties');

    checkBox2 = document.getElementById(checkBox2ID);

    if (comboBoxSelectedValue == "PieChart") {
        document.getElementById('HideCheckBoxWhenDecorated').style.display = 'none';
        document.getElementById('HideLabelWhenDecorated').style.display = 'none';
        radDateTimePicker2.set_visible(false);
        chartFieldset.style.height = "70px";
        radDateTimePicker1.set_enabled(checkBox2.checked);
    }
    else if (comboBoxSelectedValue == "LineChart") {
        document.getElementById('HideCheckBoxWhenDecorated').style.display = '';
        document.getElementById('HideLabelWhenDecorated').style.display = '';
        radDateTimePicker2.set_visible(true);
        chartFieldset.style.height = "94px";
        radDateTimePicker1.set_enabled(checkBox2.checked);
        radDateTimePicker2.set_enabled(checkBox2.checked);
    }

    //IE Specific patching
    if($telerik.isIE) {
        var tableFieldset = $telerik.$(chartFieldset).parents("table.rfdRoundedWrapper_fieldset").filter("table.rfdRoundedWrapper_fieldset");
        if(tableFieldset.length) {//if the jQuery object contains no elements found, then we should skip the fix.
            tableFieldset = tableFieldset[0];
            var previousTD = chartFieldset.parentNode.previousSibling;
            var nextTD = chartFieldset.parentNode.nextSibling;
            if(comboBoxSelectedValue == "PieChart") {
                Sys.UI.DomElement.removeCssClass(tableFieldset, "rfdHeight94");
                Sys.UI.DomElement.removeCssClass(previousTD, "rfdTD94");
                Sys.UI.DomElement.removeCssClass(nextTD, "rfdTD94");

                Sys.UI.DomElement.addCssClass(tableFieldset, "rfdHeight70");
                Sys.UI.DomElement.addCssClass(previousTD, "rfdTD70");
                Sys.UI.DomElement.addCssClass(nextTD, "rfdTD70");
            }
            else if(comboBoxSelectedValue == "LineChart") {
                Sys.UI.DomElement.addCssClass(tableFieldset, "rfdHeight94");
                Sys.UI.DomElement.addCssClass(previousTD, "rfdTD94");
                Sys.UI.DomElement.addCssClass(nextTD, "rfdTD94");

                Sys.UI.DomElement.removeCssClass(tableFieldset, "rfdHeight70");
                Sys.UI.DomElement.removeCssClass(previousTD, "rfdTD70");
                Sys.UI.DomElement.removeCssClass(nextTD, "rfdTD70");
            }
        }
    }
}

//When the user changes between Line Chart and Pie Chart the number of controls
//displayed on the window changes. As such, I need to expand/contract the
//size of the window. This causes the window to resize itself.
function OnClientSelectedIndexChanged(sender, eventArgs) {
    var comboBoxValue = eventArgs.get_item().get_value();
    ValidateWindowState(comboBoxValue);

    if( formInitializing == false ) {
        AdjustRadWindow();
    }
}

function AdjustRadWindow() {
    var oWindow = GetRadWindow();
    if (oWindow.isVisible()) {
        oWindow.autoSize(true);
    }
}

var lastChangedHeight = 0;

function OnPopupClosing() {
    var oWindow = GetRadWindow();
    if (oWindow.isVisible()) {
        oWindow.set_height(oWindow.get_height() - lastChangedHeight);
    }
}

//When the DateTimePickers pop-up the window doesn't expand. This forces the window
//to change size based on whether it is open or not.
function OnPopupOpening(sender, eventArgs) {
    var senderID = sender.get_id();
    var oWindow = GetRadWindow();
    if (oWindow.isVisible()) {
        var popup = eventArgs.get_popupControl();
        if (popup.get_id().indexOf("calendar") != -1) {
            if (senderID == "RadDateTimePicker1") {
                if (radComboBox1.get_value() == "LineChart") {
                    oWindow.set_height(oWindow.get_height() + 140);
                    lastChangedHeight = 140;
                }
                else if (radComboBox1.get_value() == "PieChart") {
                    oWindow.set_height(oWindow.get_height() + 160);
                    lastChangedHeight = 160;
                }
            }
            else {
                oWindow.set_height(oWindow.get_height() + 170);
                lastChangedHeight = 170;
            }
        }
        else {
            if (senderID == "RadDateTimePicker1") {
                if (radComboBox1.get_value() == "LineChart") {
                    oWindow.set_height(oWindow.get_height() + 160);
                    lastChangedHeight = 160;
                }
                else if (radComboBox1.get_value() == "PieChart") {
                    oWindow.set_height(oWindow.get_height() + 180);
                    lastChangedHeight = 180;
                }
            }
            else {
                oWindow.set_height(oWindow.get_height() + 180);
                lastChangedHeight = 180;
            }
        }
    }
}

Anyway, the issue is pretty minor. I am comparing how the dialog window looks under Chrome vs IE9. I suspect there is just one CSS rule missing that would make the entire thing come together, but I'm at a loss.

I've attached an image comparing what I see under chrome vs IE. It looooks like 99% of the issue is on how auto-size is resizing the window for IE. The padding discrepancies throughout the dialog window don't really add up to the amount of spacing which exists at the bottom of the IE window.

Thanks for taking some time on this. And if I learn anything more regarding Opera I can keep you guys informed. :)

[Marin Bratanov]

Hi Sean,

This issue probably stems from the way browsers calculate dimensions, as the RadWindow sets the size the browser returns for the content for its height and width.

Please note that cross browser compatibility does not always mean pixel perfect - what is important is that the design is not broken, it is easily recognizable in each browser and it appears correctly. Having a pixel-perfect design is hardly achievable as most of the differences come from browser discrepancies we cannot control and which are prone to changing from one browser version to the next. Add to that the current rate at which new versions are produced and you would need to throw too much effort into equalizing several pixels in all browsers, which would impact the actual functionality and other features of the control as valuable time and resources will be drained from them.

Besides, users do not browse with several browsers opened to compare a few pixels difference in them and this will hardly be noticed.


Kind regards,
Marin
the Telerik team