This is a migrated thread and some comments may be shown as answers.

Attempting to override the default .rcbHovered CSS...

6 Answers 103 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Allen Smothers
Top achievements
Rank 2
Allen Smothers asked on 04 Dec 2009, 07:30 PM
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

6 Answers, 1 is accepted

Sort by
0
Schlurk
Top achievements
Rank 2
answered on 04 Dec 2009, 10:32 PM
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;  
}  

0
Allen Smothers
Top achievements
Rank 2
answered on 07 Dec 2009, 02:46 PM
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
0
Schlurk
Top achievements
Rank 2
answered on 07 Dec 2009, 08:55 PM
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?
0
Allen Smothers
Top achievements
Rank 2
answered on 07 Dec 2009, 09:26 PM
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
0
Kamen Bundev
Telerik team
answered on 09 Dec 2009, 01:58 PM
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.
0
Allen Smothers
Top achievements
Rank 2
answered on 09 Dec 2009, 02:44 PM
Thanks Kamen!  Worked like charm!

-Allen
Tags
ComboBox
Asked by
Allen Smothers
Top achievements
Rank 2
Answers by
Schlurk
Top achievements
Rank 2
Allen Smothers
Top achievements
Rank 2
Kamen Bundev
Telerik team
Share this question
or