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

FormDecorator decorates label

3 Answers 137 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
robertw102
Top achievements
Rank 1
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

Sort by
0
Georgi Tunev
Telerik team
answered on 17 Mar 2010, 10:24 AM
Hello robertw102,

I tried to reproduce the problem locally but to no avail. Could you please post a sample page where this issue could be reproduced along with the exact version of the control that you are using?

Regards,
Georgi Tunev
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.
0
robertw102
Top achievements
Rank 1
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.
0
Tsvetie
Telerik team
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.
Tags
FormDecorator
Asked by
robertw102
Top achievements
Rank 1
Answers by
Georgi Tunev
Telerik team
robertw102
Top achievements
Rank 1
Tsvetie
Telerik team
Share this question
or