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

FormDecorator, enabling disabled input-controls client-side, and weird padding.

7 Answers 214 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 2
Sean asked on 08 Nov 2011, 01:21 AM
Hi Telerik,

I am experiencing this issue on Google Chrome 15.0.874.106 m using Telerik.Web.UI.dll v 2011.2.915.35

I have a RadWindow which points to a separate .aspx page. While this window is loading I take the liberty of setting the state of some controls. I am experiencing something very quirky when I enable my input control, though.

I have attached a 'before' and 'after' picture to this thread, but I've got some explaining to do, too. I put this through a couple of hours of testing and discovered some pretty weird discrepancies in functionality, which I would like to draw attention to. 

Alright, so, here's the code-behind for the page the RadWindow points to:

<%@ Page Language="C#" EnableViewState="False" AutoEventWireup="True" CodeBehind="CustomLocalSettings.aspx.cs" Inherits="CableSolve.Web.Dashboard.Dialog.Windows.CustomLocalSettings" %>
<%@ Import Namespace="CableSolve.Web.Controllers.Managers" %>
 
<!DOCTYPE html>
<html lang="en">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
             
            <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" Runat="Server" />
            <telerik:RadFormDecorator ID="RadFormDecorator1" Runat="Server" DecoratedControls="All" />
 
            <telerik:RadScriptBlock ID="RadScriptBlock1" Runat="Server" >
                <link rel="stylesheet" type="text/css" href="../../../Content/Dashboard/CustomLocalSettings.css?v=<%= VersionManager.GetApplicationVersion() %>" />
            </telerik:RadScriptBlock>
 
            <telerik:RadScriptManager ID="RadScriptManager1" Runat="Server" EnablePageMethods="True">
                <CompositeScript>
                    <Scripts>
                        <asp:ScriptReference Path="~/Scripts/Dashboard/CustomLocalSettings.js" />
                        <asp:ScriptReference Path="~/Scripts/Dashboard/SharedSettingsFunctionality.js" />
                        <asp:ScriptReference Path="~/Scripts/jquery-1.6.4.js" />
                    </Scripts>
                </CompositeScript>
            </telerik:RadScriptManager>
 
            <telerik:RadCodeBlock ID="RadCodeBlock1" Runat="server">
                <script type="text/javascript">
                    var autoRefreshNumericTextBoxID = "<%= AutoRefreshNumericTextBox.ClientID %>";
                    var chartComboBoxID = "<%= ChartComboBox.ClientID %>";
                    var autoRefreshCheckBoxID = "<%= AutoRefreshCheckBox.ClientID %>";
                </script>
            </telerik:RadCodeBlock>
 
            <div id="Content">
                <fieldset id="RefreshProperties">
                    <legend>Refresh Settings</legend>
                    <div id="RefreshArea">
                        <div id="RefreshLeftSide">
                            Auto-Refresh Enabled:
                            <asp:CheckBox ID="AutoRefreshCheckBox" Runat="Server" />
                        </div>
                        <div id="RefreshRightSide">
                            <telerik:RadNumericTextBox ID="AutoRefreshNumericTextBox" Runat="Server" Label="Auto-Refresh Interval (Minutes):" MaxValue="60" MinValue="1" ShowSpinButtons="True" Value="1" Width="225px" 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="ChartComboBox" Runat="Server">
                            <Items>
                                <telerik:RadComboBoxItem Runat="Server" Text="Bar Chart" Value="BarChart" />
                                <telerik:RadComboBoxItem Runat="Server" Text="Stacked Bar Chart" Value="StackedBarChart" />
                            </Items>
                        </telerik:RadComboBox>
                    </div>
                </fieldset>
 
                <div class="BottomButton">
                    <asp:UpdatePanel>
                        <ContentTemplate>
                            <telerik:RadButton ID="ApplySettings" Runat="Server" Text="Apply" OnClientClicked="CloseAndSave" />
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
            </div>
        </form>
    </body>
</html>

Note that for my example the most-relevant portion of the code is located within the "RefreshProperties" div.
In addition, note that I am able to reproduce this issue with the CSS file commented out. I'll provide it at the end of this document just for the sake of it, but you should not need it.

//SharedSettingsFunctionality.js
 
//Contains functionality that all the dialog windows share in common. I found that I was maintaing a lot of code in multiple places unnecessarily.
function GetRadWindow() {
    var oWindow = null;
    if (window.radWindow) oWindow = window.radWindow;
    else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
    return oWindow;
}
 
function OnGetDockAttributesFailure(errors) {
    alert(errors);
}
 
function SetAutoRefreshState() {
    var autoRefreshNumericTextBox = $find(window.autoRefreshNumericTextBoxID);
    var wrapperElement = $get(autoRefreshNumericTextBox._wrapperElementID);
    var label = $(wrapperElement.getElementsByTagName("label")[0]);
    if ($('#' + window.autoRefreshCheckBoxID).is(':checked')) {
        autoRefreshNumericTextBox.enable();
        label.addClass("LabelEnabled");
        label.removeClass("LabelDisabled");
    }
    else {
        autoRefreshNumericTextBox.disable();
        label.addClass("LabelDisabled");
        label.removeClass("LabelEnabled");
    }
}

//CustomLocalSettings.js
 
function pageLoad() {
    var oWindow = GetRadWindow();
    var dockID = oWindow.argument;
 
    if (dockID) {
        InitializeForm(dockID);
    }
    oWindow.argument = null;
}
 
function InitializeForm(dockID) {
    SetAutoRefreshState();
    $('#' + window.autoRefreshCheckBoxID).click(SetAutoRefreshState);
 
    window.PageMethods.GetDockAttributes(dockID, OnGetDockAttributesSuccess, OnGetDockAttributesFailure);
}
 
//Pass the dialog data back to Dashboard.
function CloseAndSave() {
    var oWindow = GetRadWindow();
    var customAttributes = {};
    customAttributes["RefreshEnabled"] = $('#' + window.autoRefreshCheckBoxID).is(':checked');
    customAttributes["RefreshInterval"] = $find(window.autoRefreshNumericTextBoxID).get_value();
    customAttributes["ChartType"] = $find(window.chartComboBoxID).get_value();
    oWindow.argument = customAttributes;
    oWindow.close();
    oWindow.argument = null; //Important because pageLoad gets called once more after oWindow closes.
}
 
function OnGetDockAttributesSuccess(result) {
    var dockData = $.parseJSON(result);
    //Change the initial loading state based on the dock's known settings.
    if (dockData["RefreshEnabled"]) {
        $('#' + window.autoRefreshCheckBoxID).attr('checked', true);
 
        var autoRefreshNumericTextBox = $find(window.autoRefreshNumericTextBoxID);
 
        autoRefreshNumericTextBox.set_value(dockData["RefreshInterval"]);
        autoRefreshNumericTextBox.enable();
 
        var wrapperElement = $get(autoRefreshNumericTextBox._wrapperElementID);
        var label = $(wrapperElement.getElementsByTagName("label")[0]);
        label.addClass("LabelEnabled");
        label.removeClass("LabelDisabled");
    }
 
    $find(window.chartComboBoxID).findItemByValue(dockData["ChartType"]).select();
 
    $('#Content').show();
    GetRadWindow().autoSize();
}

Okay, once again, most of this is not necessary -- but if it came down to it I wanted Telerik to be able to build easily.

Anyway, the following code executes:

  •  CustomLocalSettings - pageLoad (calling InitializeForm);
  •  CustomLocalSettings - InitializeForm (calling SetAutoRefreshState );
  •  SharedSettingsFunctionality - SetAutoRefreshState: This method sets my input controls to disabled initially on default behavior.

At this point the code relevant to this discussion has fired, the window loads, and looks fine. AutoRefreshNumericTextBox is disabled, as well as it's associated CheckBox. The user then clicks the CheckBox to enable the AutoRefreshNumericTextBox. When it becomes enabled, the input holds its location but the label and arrow-adjuster break from their div and drop.

This in itself wasn't that weird, bugs happen, but there's some other weird things to mention:

  1. I have this exact same code on another dialog window which uses ContentTemplate instead of directing to a separate page. It does not experience this issue. Only having the FormDecorator on a page which is loading seems to cause the issue.
  2. If I tell FormDecorator to use DecorationZoneID = "Content" then I see a change in the error. Instead of arising when the input control becomes enabled (the control enables fine..), I see the div break out when I press the 'Up' arrow on the RadNumericTextBox.
  3. Similarly, if I tell the control to skip decorating TextBox's, the control renders fine until I press the 'Up' arrow.

If I disable the FormDecorator I do not see any issues.

I performed a diff of the HTML mark-up being rendered before/after the control breaks from the div. The only change I saw, other than the CssClass changing from LabelEnabled to LabelDisabled, was that the RadNumericTextBox gained maxlength="524288"

The control does not gain this property when it is loaded inside of the ContentTemplate RadWindow.

Other information:

//CustomLocalSettings CSS
 
body
{
    font-size: 12px;
    font-family: "segoe ui", arial, sans-serif;
    overflow: hidden;
    /*Leave this for auto-sizing behavior under IE*/
    width: 403px;
}
 
.LabelEnabled,
.riTextBox
{
    color: Black !important;
}
 
.LabelDisabled
{
    color: Gray !important;
}
 
.BottomButton
{
    padding-top: 7px;
    margin-left: 170px;
    padding-bottom: 7px;
}
 
#RefreshArea
{
    padding: 2px;
}
 
/*Leave this for IE8: Extends the fieldset to make it look proper.*/
#ChartArea
{
    width: 378px;
}
 
#RefreshLeftSide
{
    float: left;
    margin-top: 3px;
}
 
#RefreshRightSide
{
    float: left;
    margin-left: 5px;
}
 
.rfdRoundedWrapper_fieldset
{
    display: block\9 !important;
}
 
#RefreshArea,
#ChartArea
{
    overflow: auto\9;
    margin: 4px 5px 8px 5px\9;
}
 
._Telerik_IE9 #RefreshArea,
._Telerik_IE9 #ChartArea
{
    margin: 0px;
}
 
#Content
{
    display: none;
}

PasteBins for HTML Diffs:

RadWindow which points to .ASPX 


RadWindow using content template:


See attached for 3 screenshots.

Thank you for your time. I hope I have provided enough information for you guys to track this down on your end. Hopefully it's not a super simple mistake on my end... 

7 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 08 Nov 2011, 02:17 PM
Hi Sean,

I have tried to reproduce the issue, but to no avail. Find attached a sample project with my test. In Chrome and in disabled and enabled mode everything works as expected.

I have modified a little the project in order to run it. Could you check what I missed in order to reproduce the issue?

All the best,
Bozhidar
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Sean
Top achievements
Rank 2
answered on 08 Nov 2011, 06:56 PM
Hi Bozhidar,

Thank you for your quick response. After looking at the project you provided I was able to find the root cause. I believe the error lies on Telerik's shoulders, though. I will explain and provide a simplified, running sample project with this thread.

TL;DR: (Something's) not conforming to the HTML5 spec. 

http://dev.w3.org/html5/spec/syntax.html#the-doctype

8.1.1 The DOCTYPE

DOCTYPE is a required preamble.

DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.

A DOCTYPE must consist of the following components, in this order:

  1. A string that is an ASCII case-insensitive match for the string "<!DOCTYPE".
  2. One or more space characters.
  3. A string that is an ASCII case-insensitive match for the string "html".
  4. Optionally, a DOCTYPE legacy string or an obsolete permitted DOCTYPE string (defined below).
  5. Zero or more space characters.
  6. A U+003E GREATER-THAN SIGN character (>).

In other words, <!DOCTYPE html>, case-insensitively.


Here's a sample project demonstrating incorrect behavior. I've removed as many dependencies as I can. I left the need for jquery-1.6.4.js, but moved all other css and javascript into the markup files.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Sandbox.Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" NavigateUrl="~/Window.aspx" Width="450px"/>
    </form>
</body>
</html>


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Window.aspx.cs" Inherits="Sandbox.Window" %>
 
<!DOCTYPE html>
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-size: 12px;
            font-family: "segoe ui" , arial, sans-serif;
        }
 
        #RefreshArea
        {
            padding: 2px;
        }
 
        #RefreshLeftSide
        {
            float: left;
            margin-top: 3px;
        }
 
        #RefreshRightSide
        {
            float: left;
            margin-left: 5px;
        }
 
    </style>
</head>
<body>
    <form id="form1" runat="server">
 
        <telerik:RadScriptManager ID="RadScriptManager1" Runat="Server" >
            <CompositeScript>
                <Scripts>
                    <asp:ScriptReference Path="~/Scripts/jquery-1.6.4.js" />
                </Scripts>
            </CompositeScript>
        </telerik:RadScriptManager>
 
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="Server" />
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="Server" DecoratedControls="All" Skin="Web20" />
 
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                var autoRefreshNumericTextBoxID = "<%= AutoRefreshNumericTextBox.ClientID %>";
                var autoRefreshCheckBoxID = "<%= AutoRefreshCheckBox.ClientID %>";
 
                function pageLoad() {
                    SetAutoRefreshState();
                    $('#' + window.autoRefreshCheckBoxID).click(SetAutoRefreshState);
                }
 
                function SetAutoRefreshState() {
                    var autoRefreshNumericTextBox = $find(window.autoRefreshNumericTextBoxID);
 
                    if ($('#' + window.autoRefreshCheckBoxID).is(':checked')) {
                        autoRefreshNumericTextBox.enable();
                    }
                    else {
                        autoRefreshNumericTextBox.disable();
                    }
                }
            </script>
        </telerik:RadCodeBlock>
 
        <fieldset id="RefreshProperties">
            <legend>Refresh Settings</legend>
            <div id="RefreshArea">
                <div id="RefreshLeftSide">
                    Auto-Refresh Enabled:
                    <asp:CheckBox ID="AutoRefreshCheckBox" Runat="Server" />
                </div>
                <div id="RefreshRightSide">
                    <telerik:RadNumericTextBox ID="AutoRefreshNumericTextBox" Runat="Server" Label="Auto-Refresh Interval (Minutes):" MaxValue="60" MinValue="1" ShowSpinButtons="True" Value="1" Width="225px" DataType="System.Int32">
                        <NumberFormat DecimalDigits="0" AllowRounding="False" />
                    </telerik:RadNumericTextBox>
                </div>
            </div>
        </fieldset>
 
    </form>
</body>
</html>

both .cs files are blank.

Run the above code and observe that a RadWindow pops up with one fieldset, checkbox, and input control. They all look properly formatted. Yet, if you check the checkbox the input controls breaks free.

Now, observe that if you modify the DOCTYPE tag away from the HTML5 standard to the "obsolete permitted DOCTYPE string" which is used in Default.aspx, the bug goes away.

DOCTYPE containing an obsolete permitted DOCTYPE string is an obsolete permitted DOCTYPE. Authors should not use obsolete permitted DOCTYPEs, as they are unnecessarily long.

Thanks for looking into this.

Sean
0
Accepted
Bozhidar
Telerik team
answered on 09 Nov 2011, 01:50 PM
Hello Sean,

I succeed to reproduce the issue. We will try to find out what the problem should be and to fix it. However I have teset it with other browsers also such as Firefox, Safari and IE9 which are HTML5 friendly and the problem could not be reproduced with them, whcih could means that this could be a Chrome bug. Anyway, we will test and and try to fix it, if it is possible.

Kind regards,
Bozhidar
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
GlenB
Top achievements
Rank 1
answered on 15 Dec 2011, 09:55 PM
I have had some strange rendering problems (in tables with radinput controls) when using the radformdecorator since the Q3 2011 release also.

At first I thought it was a Chrome bug as it looked fine in IE and FF, but then I discovered the same rendering issues in Safari and after adding parts bit by bit I discovered the problem was being caused by the radformdecorator.

My point is - try testing it in Safari too and you may find the same issue as with Chrome (which rules out a Chrome bug).
0
Bozhidar
Telerik team
answered on 19 Dec 2011, 09:25 AM
Hi Glen,

Thanks for reporting that to us, but would you be more specific what do you mean by: "strange rendering problems"? It will be good, if you could send us the code that reproduces the issue. A screenshot also would be useful.

Note, that Chrome and Safari are both webkit based browsers and it is expected almost all issues to exist in both browsers.

All the best,
Bozhidar
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
GlenB
Top achievements
Rank 1
answered on 20 Dec 2011, 01:32 AM
I decided to remove any formdecorator controls from my project completely as they are not a good time investment. The problem I was speaking of involved tables with radinput controls in them - the inputcontrols ended up with a lot of additional padding to the right of them which upset the table layout. This only started happening after the Q3 2011 release and I only noticed due to complaints from my clients.
Anyway, I have removed the formdecorators which were causing the problems and I don't have the time to strip down the page to send a demo - thanks anyway.
0
Bozhidar
Telerik team
answered on 20 Dec 2011, 10:21 AM
Hi Glen,

Thank you for your time to explain the details of the issue. I succeeded to reproduce and found that that bug is already fixed and the fix is available in the latest internal build. However, if you do not want to download it, here I`m providing a simple JavaScript fix that will allow you to use FromDecorator on your pages in Chrome and Safari and to have nicely decorated form elements:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        td, table
        {
            border: 1px solid #555;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadManager" runat="server" />
    <telerik:RadFormDecorator runat="server" ID="rfd1" DecoratedControls="All" Skin="Forest" />
    <table cellpadding="2" cellspacing="0">
        <tr>
            <td>ASP TextBox</td>
            <td><telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Value="99.99" Type="Currency" LabelCssClass="MyLabel" />
            </td>
        </tr>
    </table>
    </form>
    <script type="text/javascript">
        var oldIsApplicableToUnifyWidth = Telerik.Web.UI.RadFormDecorator.prototype.isApplicableToUnifyWidth;
        Telerik.Web.UI.RadFormDecorator.prototype.isApplicableToUnifyWidth = function (element) {
            return oldIsApplicableToUnifyWidth.apply(this, arguments) && (!this.ancestorWithCssClass(element, "RadInput"));
        };
        Telerik.Web.UI.RadFormDecorator.prototype.ancestorWithCssClass = function (element, className) {
            for (var parent = element.parentNode; parent.tagName; parent = element.parentNode)
                if (Sys.UI.DomElement.containsCssClass(parent, className))
                    return parent;
 
            return null;
        };
    </script>
</body>
</html>

Let us know if this works for you.

Greetings,
Bozhidar
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
Tags
FormDecorator
Asked by
Sean
Top achievements
Rank 2
Answers by
Bozhidar
Telerik team
Sean
Top achievements
Rank 2
GlenB
Top achievements
Rank 1
Share this question
or