RadWindow height incorrect in Opera

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

    Posted 06 Sep 2011 Link to this post

    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
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 07 Sep 2011 Link to this post

    Hello Sean,

    The first thing I notice is that your setting your RadWindow height to 100, which in another post I've read here says that the RadWindow's iFrame cannot be set below 125 as it's a browser limitation of the iFrame itself.

    Have you tried setting it to a larger height and seeing it makes a difference?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012
  5. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 07 Sep 2011 Link to this post

    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>
                    </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;
    }
  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 08 Sep 2011 Link to this post

    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 >>

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