RadInputManager Settings Styles

2 posts, 0 answers
  1. stoneym
    stoneym avatar
    6 posts
    Member since:
    Jul 2012

    Posted 04 May 2009 Link to this post

    When setting styles for the EmptyMessageCSSClass on the Settings object on a RadInputManager, some styles are not applied.

    I have the following page:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadInputManagerTest._Default" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!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"
        <link id="DefaultCSS" runat="server" href="~/style/default.css" type="text/css" rel="stylesheet" /> 
        <title></title
    </head> 
    <body> 
        <form id="form1" runat="server"
        <div> 
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            </telerik:RadScriptManager> 
            <telerik:RadInputManager ID="RadInputManager1" runat="server"
                <telerik:TextBoxSetting EmptyMessageCssClass="emptyMessage" BehaviorID="behavior1" EmptyMessage="test"
                    <TargetControls> 
                        <telerik:TargetInput ControlID="TextBox1" /> 
                    </TargetControls> 
                </telerik:TextBoxSetting> 
            </telerik:RadInputManager> 
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
        </div> 
        </form> 
    </body> 
    </html> 

    I have the following css:
    .emptyMessage 
    {     
        border-bottomsolid 2px red

    When the page is displayed, the style never gets applied.  I can see from Developer Tools in both IE and Firefox that the style for "HTML BODY .RadInputMgr_Default is the style getting applied and it takes precedence over my style and sets the border.

    The HTML source of the page looks like this:
            <input name="TextBox1" type="text" value="test" id="TextBox1" 
     class="RadInputMgr_Default RadInput_Empty_Default emptyMessage" 
     onmouseover="javascript:$radIE.mouseOver(event);" 
     onmouseout="javascript:$radIE.mouseOut(event);" 
     onkeypress="javascript:$radIE.keyPress(event);" 
     onblur="javascript:$radIE.blur(event);" 
     onfocus="javascript:$radIE.focus(event);" /> 
     

    So anyone have any ideas on this one?  I don;t necessarily need to set the border but it looks like any style attribute I set that is already specified by the default stylesheets will get overridden.

    Thanks,
    Stoney
  2. Dimo
    Admin
    Dimo avatar
    8450 posts

    Posted 05 May 2009 Link to this post

    Hello Stoney,

    Your custom CSS rule is not applied, because its specificity (10) is less than the embedded rule's specificity (12). Please use specificity of 13 or more for your custom CSS rule.

    For more information, please refer to:

    How to override embedded skins


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