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

FormDecorator decorates label

3 Answers 144 Views

FormDecorator

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

robertw102 asked on 11 Mar 2010, 09:23 PM

I've noticed that when you have DecoratedControls="CheckBoxes,RadioButtons" that the FormDecorater adds the class to the html element and causes my label tags to use the line-height property set by the FormDecorator css class. I know I could overwrite this by setting by explicitly setting the line-height of my label elements in css, but I thought that the FormDecorator would only add the classes to the control they are decoarting, rather than adding it in the html tag forcing any elements below it to follow it styles.

I also understand that the reason it's done this way is to simplify the decoration, but I think it would make more sense to add a class name to the checkbox or radiobutton labels, so that they are the only ones that are controlled by the FormDecorator, instead of other label elements which have nothing to do with the decorated controls.

I hope you could add something like that in your future update of the FormDecorator control.

3 Answers, 1 is accepted

answered on 19 Mar 2010, 02:36 PM

Here is my sample page:

                    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>         
                     
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">         
            <html xmlns="http://www.w3.org/1999/xhtml">         
            <head runat="server">         
                <title></title>         
                <style type="text/css">         
                    .row         
                    {         
                        padding: 2px;         
                    }         
                    .row label         
                    {         
                        display: inline-block;         
                        padding-right: 2px;         
                    }         
                </style>         
            </head>         
            <body>         
                <form id="form1" runat="server">         
                <div>         
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">         
                    </telerik:RadScriptManager>         
                    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="CheckBoxes,RadioButtons" />         
                    <div class="row">         
                        <label>         
                            Caption:</label>         
                        <telerik:RadTextBox ID="txtTest" runat="server" EmptyMessage="Select Location">         
                        </telerik:RadTextBox>         
                    </div>         
                    <asp:CheckBox ID="chkToggleFormDecorator" runat="server" Text="Enable FormDecorator"         
                        OnCheckedChanged="chkToggleFormDecorator_CheckedChanged" Checked="true" AutoPostBack="true" />         
                </div>         
                </form>         
            </body>         
            </html>         
                     

The code-behind:

                    using System;         
            using System.Collections.Generic;         
            using System.Linq;         
            using System.Web;         
            using System.Web.UI;         
            using System.Web.UI.WebControls;         
                     
            public partial class Test : System.Web.UI.Page         
            {         
                protected void Page_Load(object sender, EventArgs e)         
                {         
                     
                }         
                protected void chkToggleFormDecorator_CheckedChanged(object sender, EventArgs e)         
                {         
                    RadFormDecorator1.Enabled = chkToggleFormDecorator.Checked;         
                }         
            }         
                     

Now I apply a style to my label elements so they display as inline-block next to the TextBox. If you toggle the FormDecorator enabled state you'll notice the vertical alignment changes on the label text. Also, the version I'm using is 2009.3.1314.35.

Thanks.

answered on 05 Apr 2010, 06:42 PM

Hello robertw102,
I suppose you get the described result only in Safari and Chrome, please correct me if I am wrong.

Actually, what you describe is exactly the way that the form decorated was implemented in its first versions. However, it turns out, that in case you have a lot of controls that the decorator should decorate, the iteration through all controls on the page is a very slow operation. As a result, in most cases, the page would show before it is decorated and then it will get decorated from top to bottom. No matter how much we optimize the client-side code of the control, JavaScript can never be as fast as the browser CSS parsing engine. Additionally, I believe you would agree with me, that most users would use the form decorator with DecoratedControls="All" setting.

Additionally, you can use the DecorationZoneID property to specify a zone to be decorated:

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecorationZoneID="decoratedZone" DecoratedControls="CheckBoxes,RadioButtons" />

<div class="row">

<label>

Caption:</label>

<telerik:RadTextBox ID="txtTest" runat="server" EmptyMessage="Select Location">

</telerik:RadTextBox>

</div>

<div id="decoratedZone">

<asp:CheckBox ID="chkToggleFormDecorator" runat="server" Text="Enable FormDecorator"

OnCheckedChanged="chkToggleFormDecorator_CheckedChanged" Checked="true" AutoPostBack="true" />

</div>

All the best,
Tsvetie
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.