Attempting to override the default .rcbHovered CSS...

7 posts, 0 answers
  1. Allen Smothers
    Allen Smothers avatar
    40 posts
    Member since:
    Nov 2006

    Posted 04 Dec 2009 Link to this post

    Hello,

    I'm having trouble overriding the default .rcbHover css in a customized skin.

    I have a single ComboBox with a custom skin derived from Web20.  I have a situation where I need to apply a specific item style based on some conditions.  I do this by setting the RadComboBoxItem's CssClass property in the code-behind.  The problem I'm encountering is that when the user hovers over the specific item with the new class I get the default hover class.

    My code may help explain:

    ASPX:
    <script language="javascript" type="text/javascript"
        function cboOpening(sender, eventArgs) 
        { 
            //alert('cboOpening() called.'); 
           if (sender.get_items().get_count() <= 1) 
             sender.requestItems(sender.get_text(),false); 
        } 
    </script> 
     
     
    <telerik:RadComboBox ID="cbo" Runat="server" Height="200px" Width="400px" AutoPostBack="true" 
        EnableLoadOnDemand="false" 
        ShowDropDownOnTextboxClick="true" 
        MarkFirstMatch="true" 
        AllowCustomText="false" 
        ShowMoreResultsBox="false" 
        ItemRequestTimeout="500" 
        OnItemsRequested="cbo_ItemsRequested" EnableViewState="false"  
        OnSelectedIndexChanged="cbo_SelectedIndexChanged" 
        OnClientDropDownOpening="cboOpening"
    </telerik:RadComboBox> 

    C#:
    protected void Page_Load(object sender, EventArgs evt) 
        if (!Page.IsPostBack) 
        { 
            cbo.Items.Clear(); 
            cbo.Items.Add(new RadComboBoxItem(some_text)); 
                cboHEs.SelectedIndex = 0; 
        } 
     
     
    public void cbo_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs evt) 
        SessionMgr.ValidateSession(); 
        LoadCBO(); 
     
     
    protected void cbo_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs evt) 
        string selectedText = cbo.Text; 
        if ((selectedText != null) && (selectedText .Trim().Length > 0)) 
        { 
             // Do some stuff... 
        } 
     
     
    protected void LoadCBO() 
        cbo.Items.Clear(); 
     
        foreach (Object obj in ObjectList) 
        { 
            RadComboBoxItem item = new RadComboBoxItem(obj.ToString()); 
     
            cbo.Items.Add(item); 
     
            if (_someCondition_) 
            { 
                item.CssClass = "NewOverrideClass"
            } 
        } 

    Finally the CSS:
    .RadComboBoxDropDown_CustomSkin .NewOverrideClass 
        background-image: url('image.gif'); 
        background-repeat: no-repeat; 
        background-position: top right; 
        padding: 2px 6px; 
        margin: 0 1px; 
     
    .RadComboBoxDropDown_CustomSkin .rcbHovered // <-- This is the default hover class 
        padding: 1px 18px 1px 5px; 
        border: 1px solid #bcd2f1; 
        background: #e7f1ff; 
        color: #0f3789; 
     

    I've tried overriding by trying CSS inheritance (probably wrong)...

    .RadComboBoxDropDown_CustomSkin .NewOverrideClass .rcbHovered
    {
    padding: 1px 18px 1px 5px;
    border: 1px solid #bcd2f1;
    background: #e7f1ff;
    color: #0f3789;
    }

    Any help is appreciated!
    -Allen

  2. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 04 Dec 2009 Link to this post

    Try using the !important flag to raise the specificity:

    .RadComboBoxDropDown_CustomSkin .rcbHovered // <-- This is the default hover class  
    {  
        padding1px 18px 1px 5px !important;  
        border1px solid #bcd2f1 !important;  
        background#e7f1ff !important;  
        color#0f3789 !important;  
    }  

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Allen Smothers
    Allen Smothers avatar
    40 posts
    Member since:
    Nov 2006

    Posted 07 Dec 2009 Link to this post

    I appreciate the help Schlurk!  Unfortunately, this doesn't solve my problem.

    I have a combobox that is bound when the user loads the page.  Inside the combobox, I have items that can have two different styles (default and NewOverrideClass).  The problem that I'm having is that on items that have the NewOverrideClass still have the default hover css.

    Maybe this table will help in explaining...

    Not Hovered Hovered
    -----------------------------------------------------------------
    Default Default

    NewOverrideClass  Default           <--- I need the Hovered to use my defined class

    Any ideas?

    Thanks again,
    Allen
  5. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 07 Dec 2009 Link to this post

    Hmm, I attempted to implement this as well (using the built-in CssClass property) but was unable to actually get it to work. I'm wondering if alternating/separate styles is even possible with the RadComboBox or if we're just not doing something right. Were you able to make any progress on this?
  6. Allen Smothers
    Allen Smothers avatar
    40 posts
    Member since:
    Nov 2006

    Posted 07 Dec 2009 Link to this post

    I haven't made any progress as of late.  It seems like we're missing something simple doesn't it?  Any telerik help out there?

    Thanks again for the help Shlurk!

    -Allen
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 09 Dec 2009 Link to this post

    Hi Allen,

    What you are trying to do can be done with a simple class chain selector:

    div.RadComboBoxDropDown .rcbHovered.NewOverrideClass
    {
        background: green;
    }

    Unfortunately this won't work in IE6 where these selectors are not supported. See this article for more information:

    http://reference.sitepoint.com/css/classselector


    Greetings,
    Kamen Bundev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Allen Smothers
    Allen Smothers avatar
    40 posts
    Member since:
    Nov 2006

    Posted 09 Dec 2009 Link to this post

    Thanks Kamen!  Worked like charm!

    -Allen
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017