Combobox lost style when applying css style

[Alfred]

I have placed a RAD combobox inside a table cell and I set the skin as below:

<telerik:RadComboBox ID="listSupplier" runat="server" Skin="Outlook" HighlightTemplatedItems="true"><CollapseAnimation Duration="200" Type="OutQuint" /></telerik:RadComboBox>

But if I apply a css style to the table, it looks like:



The style is:

#mytable500 th.nobg
{
    border-top: 0px none;
    border-left: 0px none;
    border-right: 1px solid #C1DAD7;
    background: none;
    color: #ffff66;
}

#mytable500 td {
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    background: #fff;
    padding: 6px 6px 6px 12px;
    color: #4f6b72;
}


#mytable500 td.alt {
    background: #F5FAFA;
    color: #797268;
}

#mytable500 td.spec {
    border-left: 1px solid #C1DAD7;
    border-top: 0px none;
    background: #fff url('images/bullet1.gif') no-repeat;
    font-style:normal; font-variant:normal; font-weight:bold; font-size:10px; font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif
}

#mytable500 td.specalt {
    border-left: 1px solid #C1DAD7;
    border-top: 0px none;
    background: #f5fafa url('images/bullet2.gif') no-repeat;
    color: #797268; font-style:normal; font-variant:normal; font-weight:bold; font-size:10px; font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif
}
#mytable500 th.spec {
    border-left: 1px solid #C1DAD7;
    border-top: 0px none;
    background: #fff url('images/bullet1.gif') no-repeat;
    font-style:normal; font-variant:normal; font-weight:bold; font-size:10px; font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif
}

#mytable500 th.specalt {
    border-left: 1px solid #C1DAD7;
    border-top: 0px none;
    background: #f5fafa url('images/bullet2.gif') no-repeat;
    color: #797268; font-style:normal; font-variant:normal; font-weight:bold; font-size:10px; font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif
}

I have already set the HighlightTemplatedItems="true".

Also, the calendar behaves similarly as well.

calendar

Thanks.

Alfred

[Yana]

Hello Alfred,

RadComboBox is rendered as a table and your styles overwrite the skin styles. To fix the skin, please add the following css styles to your page:

.RadComboBox_Outlook * {
    padding:0 !important;
}

.RadComboBox_Outlook td.rcbArrowCell {
    background:#9CBDEB url(arrow.gif) no-repeat scroll 0 0 !important;
}

attached is the used in the css arrow.gif image.

Best regards,
Yana
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.