RadWindow does not auto-resize properly in IE?

8 posts, 0 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 08 Aug 2011 Link to this post

    Hi Telerik,

    I have a RadWindow which is managed by RadWindowManager. It represents a dialog window.

    Here is the code declaration and how I open it:

    <telerik:RadWindow ID="HistoricalLocalSettingsWindow" Runat="Server" NavigateUrl="~/Dashboard/Dialog/Windows/HistoricalLocalSettings.aspx" OnClientShow="OnHistoricalLocalSettingsShow" OnClientClose="OnHistoricalLocalSettingsClose" IconUrl="~/Content/Dashboard/Icons/radwindow_settings.png" Title="Settings" Width="450px" AutoSize="True" AutoSizeBehaviors="Height" OnClientResize="OnHistoricalLocalSettingResizeEnd" OnClientResizeEnd="OnHistoricalLocalSettingResizeEnd" />
    function ShowLocalSettings(sender, eventArgs) {
        radDock = sender;
     
        var reportType = radDock.get_element().getAttribute("ReportType");
        if (reportType == "HistoricalReport") {
            oWindow = window.radopen(null, "HistoricalLocalSettingsWindow").center();
        }
        else if (reportType == "CustomReport") {
            oWindow = window.radopen(null, "CustomLocalSettingsWindow").center();
        }
        else {
            alert("Didn't find report type.");
        }
     
        SetupCenteringDialog(oWindow);
    }
     
    //Opens a historical report settings window -- passing the known settings to it
    //so that the window will show the proper data to the user.
    function OnHistoricalLocalSettingsShow(sender, eventArgs) {
        sender.argument = radDock.get_id();
    }

    On this window there is some content. The content that can be displayed on this window is subject to change, based on what is loading the window. The user also has the ability to add and remove this content based on a combo-box selection present inside of the window.

    As such, I tell the window to auto-resize whenever the combobox changes:

    //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 ($telerik.isIE) {
            timeout = setTimeout(function () { AdjustRadWindow(); }, 500);
        }
        else {
            AdjustRadWindow();
        }
    }

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

    This works perfectly fine in Chrome, but in IE it does not resize to the proper height. It seems to be remembering its old height (perhaps because the minHeight for the window is being set behind-the-scenes to convince IE to size the window properly? I am not sure.)

    Regardless, even if I fudge with the timeout, I see sizing issues.

    I have attached an image showing the initial state of the window in IE9.0.8112 with compatibility-mode turned off and Chrome 13.0.782

    Is there something I can do about this? Thanks

    Sean

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 09 Aug 2011 Link to this post

    Hi Sean,

    There was an issue with the autosizing under IE9 as this browser tends to return some wrong dimensions of the iframes. What you can try is upgrading to the latest internal build where a fix has been applied, or, if this is not an option, try the following function:
    function OnClientAutoSizeEnd(sender) { 
              if ($telerik.isIE9) { 
                  setTimeout(function () { 
                      sender.set_height(sender.get_height()); 
                  }, 0); 
              
          }
    which is attached to the OnClientAutoSizeEnd event. It could go without the isIE9 check just for test for now.


    Greetings,
    Marin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 09 Aug 2011 Link to this post

    Hi Marin,

    Thank you for your quick reply.

    I tried out the javascript you provided, but did not notice any difference in functionality. Of note, when I placed an alert inside of OnClientAutoSizeEnd, I saw the alert three times before completing. The window jumps around slightly (but it did before, as well) and then settles on a too-large view.

    I then upgraded to the latest internal build, removed the call to OnClientAutoSizeEnd, and experienced the same issues as before.
    Of note, I did not see in the internal build release notes that this bug was being patched, but it's probably just a minor thing that is not being mentioned.

    I wonder what else I could be doing wrong?
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 11 Aug 2011 Link to this post

    Hi Sean,

        I am not sure what else might be the cause for this behavior. It is possible that something peculiar in the content is causing the issue, as maybe IE9 renders it differently. Perhaps the dropdown of the RadComboBox retains some larger dimensions, although hidden. You could try using its get_dropDownElement function and modify the size of the dropdown in the OnClientDropDownClosed event (or any other that matches your needs). Generally it would help us if you could send an example markup that will reproduce the issue -  the content that is in the page you load in the RadWindow. Once we are able to reproduce this we will do our best to find the cause for this.


    Regards,
    Marin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 11 Aug 2011 Link to this post

    <%@ Page Language="C#" EnableViewState="False" AutoEventWireup="True" CodeBehind="DashboardGlobalSettings.aspx.cs" Inherits="CableSolve.Web.Dashboard.Dialog.Windows.DashboardGlobalSettings" %>
     
    <!DOCTYPE html>
    <html lang="en">
        <head runat="server">
            <title></title>
        </head>
        <body onclick='OnClientMouseClick("body")' >
            <form id="form1" runat="server">
                <link rel="stylesheet" type="text/css" href="../../../Content/Dashboard/DashboardGlobalSettings.css" />
     
                <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
                    <CompositeScript>
                        <Scripts>
                            <asp:ScriptReference Path="~/Scripts/Dashboard/DashboardGlobalSettings.js" />
                        </Scripts>
                    </CompositeScript>
                </telerik:RadScriptManager>
     
                <telerik:RadFormDecorator ID="RadFormDecorator1" Runat="server" DecoratedControls="All" Skin="Web20" />
     
                <telerik:RadAjaxManager ID="RadAjaxManager1" Runat="server">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="CheckBox1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RadNumericTextBox1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="RadListBox1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RadListBox1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="RadButton1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RadListBox1" />
                                <telerik:AjaxUpdatedControl ControlID="RadTextBox1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="CheckBox4">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RadNumericTextBox2" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>
     
                <telerik:RadCodeBlock ID="RadCodeBlock1" Runat="server">
                    <script type="text/javascript">
                        var radListBox1ID = "<%= RadListBox1.ClientID %>";
                        var radTextBox1ID = "<%= RadTextBox1.ClientID %>";
                        var radButton1ID = "<%= RadButton1.ClientID %>";
                        var radNumericTextBox1ID = "<%= RadNumericTextBox1.ClientID %>";
                        var radNumericTextBox2ID = "<%= RadNumericTextBox2.ClientID %>";
                        var checkBox1ID = "<%= CheckBox1.ClientID %>";
                        var checkBox4ID = "<%= CheckBox4.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="TabProperties">
                    <legend>Tab Settings</legend>
                        <div>
                            <div id="TabLeftSide">
                                <telerik:RadListBox ID="RadListBox1" Runat="server" AllowDelete="True" AllowReorder="True" EnableDragAndDrop="True" Skin="Web20" Height="95px" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged" Width="150px" OnClientLoad="OnClientLoad"/>
                            </div>
                            <div id="TabRightSide" onclick='OnClientMouseClick("notbody")'>
                                <telerik:RadTextBox ID="RadTextBox1" Runat="server" EmptyMessage="Enter tab name" Skin="Web20" Width="150px" />
                                <div id="TabButton">
                                    <telerik:RadButton ID="RadButton1" Runat="server" Skin="Web20" Text="Add Tab" OnClientClicked="OnButtonClicked" AutoPostBack="False">
                                    </telerik:RadButton>
                                </div>
                            </div>  
                        </div>
                </fieldset>
     
                <fieldset id="CycleProperties">
                    <legend>Tab Cycle Settings</legend>
                    <div id="CycleArea">
                        <div id="CycleLeftSide">
                            Auto-Cycle Enabled:
                            <asp:CheckBox ID="CheckBox4" runat="server" />
                        </div>
                        <div id="CycleRightSide">
                            <telerik:RadNumericTextBox ID="RadNumericTextBox2" Runat="server" Label="Auto-Cycle 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>
     
                <div id="BottomButton">
                    <telerik:RadButton ID="RadButton2" Runat="server" Skin="Web20" Text="Apply" OnClientClicked="CloseAndSave" OnClick="RadButton2_Click" />
                </div>
            </form>
        </body>
    </html>

    var radListBox1 = null;
    var radTextBox1 = null;
    var radButton1 = null;
     
    //Initializes the tabs on the page.
    function pageLoad() {
        //fetch necessary controls early to prevent excess finding all over.
        radListBox1 = $find(radListBox1ID);
        radTextBox1 = $find(radTextBox1ID);
        radButton1 = $find(radButton1ID);
     
        var oWindow = GetRadWindow();
     
        var tabs = oWindow.argument;
     
        //Populate the list box of tabs on the dialog window.
        if (tabs) {
            radListBox1.trackChanges();
            for (var index = 0; index < tabs.get_count(); index++) {
                var item = new Telerik.Web.UI.RadListBoxItem();
                item.set_text(tabs.getTab(index).get_text());
                item.set_value(tabs.getTab(index).get_value());
                if (index == 0) {
                    item.set_selected();
                }
                radListBox1.get_items().add(item);
            }
            radListBox1.commitChanges();
        }
     
        if ($telerik.isIE) {
            oWindow.set_height(302);
        }
     
        oWindow.argument = null;
    }
     
    //Passes the tabs back to the client.
    function CloseAndSave(args) {
        var oWindow = GetRadWindow();
        var globalAttributes = {};
        var savedTabs = {};
     
        radListBox1.get_items().forEach(function (item) {
            savedTabs[item.get_value()] = item.get_text();
        });
     
        globalAttributes["Tabs"] = savedTabs;
     
        oWindow.argument = globalAttributes;
        oWindow.close();
        oWindow.argument = null; //Important because PageLoad fires once more after closing and I use the window's arguments.
    }
     
    //Handles whether the button click was renaming or adding and swaps its state after.
    function OnButtonClicked(button, eventArgs) {
        if (radTextBox1.get_value() != "") {
            if (button.get_text() == "Rename Tab") {
                var newName = radTextBox1.get_value();
     
                if (newName) {
                    var selectedItem = radListBox1.get_selectedItem();
                    radListBox1.trackChanges();
                    selectedItem.set_text(newName);
                    radListBox1.clearSelection();
                    radListBox1.commitChanges();
                    radTextBox1.clear();
                    button.set_text("Add Tab");
                }
            }
            else if (button.get_text() == "Add Tab") {
                var item = new Telerik.Web.UI.RadListBoxItem();
                item.set_text(radTextBox1.get_value());
                var newGuid = GuidGenerator();
                item.set_value("RadTab_{0}".format(newGuid));
                radListBox1.trackChanges();
                radListBox1.get_items().add(item);
                radListBox1.commitChanges();
                radTextBox1.clear();
            }
     
            radListBox1.clearSelection();
        }
    }
     
    var previousSource = null;
    var canChange = true;
    //Controls on the page respond to mouse clicks (losing focus triggers button text to change).
    //Need to be able to click the button, though, so need to represent different types of clicks.
    //TODO: This could be less hacked together, and there are a couple of controls on the page that
    //when clicked 'feel' like they shouldn't trigger this. e.g. clicking on a disabled button.
    function OnClientMouseClick(source) {
        if (source == "notbody" || (previousSource != null && previousSource == "notbody")) {
            canChange = false;
        }
     
        if (canChange) {
            radListBox1.clearSelection();
            ChangeToAddTab();
        }
        previousSource = source;
        canChange = true;
    }
     
    //Sets up initially-disabled buttons. Shouldn't be able to delete or move home tab, only rename.
    function OnClientLoad(radListBox, eventArgs) {
        var listboxItem = radListBox.get_selectedItem();
     
        if (listboxItem == null || listboxItem.get_value() == "RadTab_Home") {
            $telerik.$(".rlbDelete", $telerik.$(".rlbButtonAreaRight")[0]).die();
            $telerik.$(".rlbDelete").addClass("rlbDeleteDisabled rlbDisabled");
            $telerik.$(".rlbMoveDown", $telerik.$(".rlbButtonAreaRight")[0]).die();
            $telerik.$(".rlbMoveDown").addClass("rlbMoveDownDisabled rlbDisabled");
        }
        else {
            $telerik.$(".rlbDelete", $telerik.$(".rlbButtonAreaRight")[0]).live("click", function (e) {
                sender._onDeleteClick(e);
                e.preventDefault();
            });
        }
    }
     
    //Ensures that the buttons stay correct when selecting different items.
    function OnClientSelectedIndexChanged(sender, eventArgs) {
        canChange = false;
        var clickedItem = eventArgs.get_item();
     
        radTextBox1.set_value(clickedItem.get_text());
        radButton1.set_text("Rename Tab");
     
        if (clickedItem == null || clickedItem.get_value() == "RadTab_Home") {
            $telerik.$(".rlbDelete", $telerik.$(".rlbButtonAreaRight")[0]).die();
            $telerik.$(".rlbDelete").addClass("rlbDeleteDisabled rlbDisabled");
            $telerik.$(".rlbMoveDown", $telerik.$(".rlbButtonAreaRight")[0]).die();
            $telerik.$(".rlbMoveDown").addClass("rlbMoveDownDisabled rlbDisabled");
        }
        else if (radListBox1.get_selectedIndex() == 1) {
            $telerik.$(".rlbMoveUp", $telerik.$(".rlbButtonAreaRight")[0]).die();
            $telerik.$(".rlbMoveUp").addClass("rlbMoveUpDisabled rlbDisabled");
            $telerik.$(".rlbDelete", $telerik.$(".rlbButtonAreaRight")[0]).live("click", function (e) {
                sender._onDeleteClick(e);
                e.preventDefault();
            });
        }
        else {
            $telerik.$(".rlbDelete", $telerik.$(".rlbButtonAreaRight")[0]).live("click", function (e) {
                sender._onDeleteClick(e);
                e.preventDefault();
            });
            $telerik.$(".rlbMoveDown", $telerik.$(".rlbButtonAreaRight")[0]).live("click", function (e) {
                sender._onMoveDownClick(e);
                e.preventDefault();
            });
            $telerik.$(".rlbMoveUp", $telerik.$(".rlbButtonAreaRight")[0]).live("click", function (e) {
                sender._onMoveUpClick(e);
                e.preventDefault();
            });
        }
    }
     
    function ChangeToAddTab() {
        radButton1.set_text("Add Tab");
        radTextBox1.clear();
    }
     
    function GetRadWindow() {
        var oWindow = null;
        if (window.radWindow) oWindow = window.radWindow;
        else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
        return oWindow;
    }
     
    //Creates GUID-Like items in JavaScript.
    function GuidGenerator() {
        var S4 = function () {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        };
        return (S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4());
    }
     
    //Allows for calling string format in JavaScript.
    String.prototype.format = function () {
        var formatted = this;
        for (arg in arguments) {
            formatted = formatted.replace("{" + arg + "}", arguments[arg]);
        }
        return formatted;
    };

    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;
    }
     
    .RadForm_Web20.rfdFieldset legend
    {
        color: #6788be;
    }
     
    .rwTable
    {
        height: 337px;
    }
     
    #TabLeftSide
    {
        float: left;
    }
     
    #TabRightSide
    {
        float: right;
        padding-right: 55px;
    }
     
    #TabButton
    {
        text-align: left;
        padding-top: 2px;
    }
     
    #BottomButton
    {
        margin-top: 10px;
        margin-left: 170px;
    }
     
    #TabProperties
    {
        height: 112px;
        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;
    }
     
    #CycleArea
    {
        padding: 2px;
    }
     
    #CycleLeftSide
    {
        text-align: center;
        float: left;
        clear: none;
        margin-top: 3px;
    }
     
    #CycleRightSide
    {
        text-align: center;
        float: left;
        clear: none;
        margin-left: 13px;
    }

    Sorry for the nested content. It doesn't appear possible to select the text box area underneath a
    code submission in this forum post.
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 15 Aug 2011 Link to this post

    Hello Sean,

    This comes from the fact that IE most of all browsers needs a width to be able to properly calculate the height of the elements. In my tests IE simply extends the content page to the incorrect height and since we have to rely on the browser to get the needed dimension the RadWindow had set an incorrect height.

    What you can do to avoid this is to specify some width for the elements inside. I added it for the body tag and the height was calculated properly in all browsers now. I also added the 8 pixel margin for the body that Chrome puts in by default so that the right borders of the fieldset are not stuck to the right side of the RadWindow:
    body
    {
        font-size: 12px;
        font-family: "segoe ui" ,arial,sans-serif;
        overflow: hidden;
        width: 420px;
        margin: 8px;
    }
      Adding this setting results in the attached screenshots on my end. I have also attached my test page I built on top of the code you sent in your last post as a reference. I hope this achieves the desired behavior.

    On a side note - it is generally better to give the content dimensions in order for the autosizing to work, otherwise we get the contradiction that we want the RadWindow to autosize itself according to the content, yet if the content has no dimensions it tries to resize itself according to its container (the RadWindow) and this is the way HTML works.

    I would also advise against calling the center() and autoSize(true) methods when opening the RadWindow, as they are not necessary. If you wish to have it centered after the resize it is best to use the OnClientAutoSizeEnd event to call the center() command.

    The other thing I notice in your content page is that it actually has no doctype, while our controls work best within an xhtml environment. We try to support other doctypes as well, but there are many challenges in this path.

    One last thing - the following snippet from the pageLoad() function in the content page is also unnecessary:
    if ($telerik.isIE)
    {
        oWindow.set_height(302);
    }



    All the best,
    Marin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 15 Aug 2011 Link to this post

    Telerik,

    Thank you for the detailed reply! I will take a look at your suggestions.

    Regarding doctype -- http://mrcoles.com/blog/html5ify-your-existing-code-base/#html5-simplified-syntax I was under the impression that with the advent of HTML5 the doctype tag was superfluous in current browsers? Am I mistaken?

    And thank you for the help cleaning up the code. :)

    Sean


  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 16 Aug 2011 Link to this post

    Hi Sean,

    I hope you will manage to tget the autosizing to work correctly and still fulfill your requirements with the project.

    As for the docrtype - I am sorry, as this was an omission on my end, I had thought that older browsers that do not support any HTML5 would revert to quirks mode with the HTML5 doctype, while it turned out that this is not the case. The shorthand doctype seems to be fully backwards compatible and induces Standards mode where possible.

    I also found a very thorough article on the matter and thought I should share it here if someone else stumbles upon a similar case: http://hsivonen.iki.fi/doctype/.


    All the best,
    Marin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017