asp:Label font-family not affected

[Seth]

I am using the FormDecorator to control the look and feel of my site.

After reading...

Telerik ASP.NET FormDecorator allows you to beautifully style 10 types of elements: Buttons, CheckBoxes, RadioButtons, Fieldset, TextBox, Textarea, Labels, H4, h5, H6.

...I assumed that the Form Decorator would change the appearance of any asp:Label on my form.  In fact, it does!  However, it only seems to change the color and not the font-family to match the currently selected skin.  Is this a bug or a design flaw or something I am doing wrong?

Thanks.

[Martin]

Hi Seth,

No, it is not a bug at all. <asp:label /> is a server control that renders a <span />, not a <label /> tag. RadFormDecorator styles only form controls and headings (<H3 /> - <H6 />), not arbitrary HTML. On the other hand, although it changes the color of these (as well as the bottom border of the headings), it does not affect the font-family. What it does is leaving these to the browser defaults or inheriting the ones that are set by the developer. font-family is a highly layout-oriented property, and it is up to the designer / developer to decide on which font to use, not up to RadFormDecorator.

Sincerely yours,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Seth]

Hi Martin,

Thank you for your reply.

To me it doesn't seem like it was a choice to not incorporate the font-family into the Form Decoorator but more of an oversight.  If I am trying to make my forms universally the same, would I also not want to have the font-family be the same across the site?  If I am using your Form Decorator to accomplish this, should not my fonts on all my text be the same as what is in all the RadControls that come from the current skin I have applied?  Instead of saying that <asp:Labels /> are not supported and then commenting that even though they are not supported the properties are affected by the Form Decorator, how about saying that Form Decorator does not currently support font-family which actually appears to be the case and would have been an honest answer instead of the cop out you supplied me.

[Tervel]

Hi Seth,

The FormDecorator styles certain elements in a certain way for certain reasons. If we take <label> elements as an example, It is not the intention of the control to set every imaginable CSS property available for 100% custom stylization of the tag. For reasons already explained, the font-family is not set, as it can indirectly affect element height (e.g. Times New 11 is less than Courier 11) - which will cause flicker while decoration is performed.

If you wish, you can assume that the Form Decorator does not currently support font-family - for the reasons explained.

Best regards,
Tervel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Cezar]

Hello Martin.

I read everything you answered and I need you to help me solve this little problem.

Correct me if i'm wrong but, you're telling me that RadFormDecorator doesn't apply styles on a asp:Label element, correct?

Ok, but my system was entirely built using asp:Label before the user controls, I would have no problem changing asp:Label to the HTML element <label> BUT, how can I insert a RESX content into a <label>?

I tryed to do this without success.

If the <label> doesn't support RESX content then what's the point on using it?

You need to apply styles over asp:Label, or tell me how to put RESX content inside a <label> element,

I'll be waiting for your response.

Thanks in advance.

Cezar

[Cezar]

I already found a way of doing this.

If anyone needs help doing the same thing just reply and i'll post what I did to solve this issue.

Thanks!

Cezar

[Marco]

Hi Cezar,

I have the same problem.
I do  also like to style all my controls the same.

Can you give me your answer?

Cheers,

Marco

[Cezar]

Hello Marco !

Offcourse! This is what I did.

1) I created a class that derives from HtmlGenericControl;
2) Then a created a property to it that I called Text;
3) This property changes the InnerHtml property of the control;
4) I also added a bool property to add (or not) an automatic ":" in front of the final Label.

public class MyLabel : HtmlGenericControl
{
    public bool HideTwoPoints { get; set; }

    public string Text
    {
        get { return this.InnerHtml; }
        set
        {
            if(HideTwoPoints)
                this.InnerHtml = value;
            else
                this.InnerHtml = value + ":";
        }
    }

    public MyLabel()
    {
    }

    public MyLabel(string tag) : base(tag)
    {
    }
}

With this you can use a more intelligent control within the RadFormDecorator without much trouble.

Well, this is it. I hope this can help you out.

Thanks dude!

Cheers!

Cezar

[Al]

Hi,
I understand from above that radFormDecorator won't style asp.labels, but what is the recommended solution?

I am using a radSkinManager to dynamically change the style so I see two options:

1. Use html labels rather than asp labels (not a good option because I already have many labels in place)
2. Dynamically set the font of labels via css based on the style of the skin manager - but I don't know how to get the font of the current skin or how to set the lable font by css.

Please help

[Al]

Ok, after some tests I think I have found a solution. Asp:Labels render as spans UNLESS an AssociatedConrolID value is set, then they render as HTML labels, which are skinned by the radFormDecorator just fine!

I'd still like to hear from anyone @Telerik as to what the recommended method is for styling labels...

[Danail Vasilev]

Hello Al,

The RadFormDecorator styles HTML label elements and not span elements. More information is available in the Integration With Standard Controls help article.

If you want, however, to style any HTML that is not styled by the RadFormDecorator you can use the decorator's classes in order to cascade through them. For example:

CSS:

01.<style>
02.    html.RadForm.RadForm_Black span.decorateSpan {
03.        color: white;
04.        font-family: "Segoe UI",Arial,Helvetica,sans-serif;
05.        font-size: 12px;
06.    }
07.
08.    html.RadForm.RadForm_Metro span.decorateSpan {
09.        color: #767676;
10.        font-family: "Segoe UI",Arial,Helvetica,sans-serif;
11.        font-size: 12px;
12.    }
13.</style>

ASPX:

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Black" ShowChooser="true"></telerik:RadSkinManager>
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
    <asp:Label ID="Label1" Text="text1" runat="server" CssClass="decorateSpan" />
    <asp:Label ID="Label2" Text="text2" runat="server" AssociatedControlID="input1" />
    <input id="input1" runat="server" type="text" name="name" value=" " />
</form>

The above CSS styles the rendered span element by the asp label for the black and metro skins but you can also make the same for the rest of the skins.

Regards,
Danail Vasilev
Telerik

 

[Al]

Thanks Danail, my method seems easier though, just set AssociatedControlID on a regular asp label and it all works just fine.

Is there perhaps a problem with my approach?

[Danail Vasilev]

Hi Al,

This approach seems reasonable to me.

Regards,
Danail Vasilev
Telerik

 

[Jerry]

As of the last two upgrades 2015.2.826 and 2015.2.729, the asp:Label is not using the current style of the RadDecorator. Previously as stated below, setting the AssociatedControlID would cause the label to get styled.  This no longer works.  Is anyone else seeing this?

[Jerry]

Sorry, stated above.