FormDecorator decorates label

4 posts, 0 answers
  1. robertw102
    robertw102 avatar
    265 posts
    Member since:
    Jul 2007

    Posted 11 Mar 2010 Link to this post

    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.
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 17 Mar 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. robertw102
    robertw102 avatar
    265 posts
    Member since:
    Jul 2007

    Posted 19 Mar 2010 Link to this post

    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.
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 05 Apr 2010 Link to this post

    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.
Back to Top