Telerik should fix incorrect CSS support in controls.

3 posts, 0 answers
  1. Chris
    Chris avatar
    33 posts
    Member since:
    Jan 2007

    Posted 22 Sep 2008 Link to this post


    I would like to request that Telerik add standard CSS support to it's ASP.NET AJAX controls, including the tabstrip. Specifically, the control's have all of their skins embedded in the DLL - which is great. But the controls also have their own font-size, etc properties that should be able to over-ride the embedded CSS files. This is just standard CSS design: locally defined styles should over-ride a stylesheet.

    The standard CSS hiearchy is follows:

    1. The order that you put the <link> reference to the style sheet at the top of the page determines the order the styles are loaded and any styles in the last sheet that are loaded that exist in the previous sheet will be over-ridden.

    2. The same applies to actual <style> tags added to a page, where the styles further down in the style tag will over-ride any others if so similarly named.

    3. Lastly, any style="" attribute placed on an individual control takes ABSOLUTE preference over any styles declared in <style> tags or separate styles sheets. This should also include the specific font-size, etc properties on the control itself.

    It would be nice if the controls supported this standard CSS approach so that I didn't have to switch off the embedded support, copy the whole style sheet for the tabstrip, all just to modify the tab's text size. If the control was following 'standard css norms' I should be able to use the control's "font-size" property to over-ride any settings in the embedded CSS file. Otherwise it doesn't even made sense to expose that useless 'font-size' property.

    Could this support for the standard CSS hierarchy be added in a future release of the ASP.NET AJAX controls?

  2. Dimo
    Dimo avatar
    8486 posts

    Posted 22 Sep 2008 Link to this post

    Hello Chris,

    All Telerik controls support points (1), (2) and (3) in this exact order, simply because browsers take case of this and there is no other way.

    However, in some cases setting styles declaratively (e.g. Font-Size) may not have effect, because the style has to be set to another element. If we take RadTabStrip as an example, this will not work:

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Font-Bold="true" Font-Size="Large">
            <telerik:RadTab Text="Tab 1"  />

    But this will work:

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server">
            <telerik:RadTab Text="Tab 1" Font-Bold="true" Font-Size="Large"  />

    The TabStrip skins define font styles for items, not for the whole control. The reason for this is to avoid the case in which some global web application styles override the TabStrip skin, which would be very easy if all font styles were defined for the control's wrapping element.

    By the way, it is not necessary at all to use a non-embedded skin in order to override some styles. Here is a blog post, which explains how to override embedded skins:

    How To Override Styles in a RadControl for ASP.NET AJAX Embedded Skin

    You seem quite familiar with the way CSS should work, so I suppose you will have no problems using one or two custom CSS classes and customizing anything you like by using CSS selectors with higher specificity than the ones in our skins.

    Sincerely yours,
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Christian Bruckhoff
    Christian Bruckhoff avatar
    9 posts
    Member since:
    May 2005

    Posted 21 Apr 2010 Link to this post

    This is pretty convoluted.

    I'm trying to get the tabstrip to show a larger font-size.







    font-size:12pt !important;



    What do I need to do to make this work?

Back to Top