Attempting to override the default .rcbHovered CSS...

[Allen Smothers]

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

[Schlurk]

Try using the !important flag to raise the specificity:

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

[Allen Smothers]

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

[Schlurk]

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?

[Allen Smothers]

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

[Kamen Bundev]

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.

[Allen Smothers]

Thanks Kamen!  Worked like charm!

-Allen