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

RadComob not showing down arrow while using Custom Skin

4 Answers 93 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Craig
Top achievements
Rank 2
Craig asked on 28 Oct 2015, 11:38 PM

As part our product development, we have created a RADCOMBO skin. When we apply this skin to the telerik combobox, it’s not showing down arrow as expected on IE. (See the picture attached) But the same works on Chrome / FireFox.

As part of troubleshooting, we isolated this skin to a clear vanilla ASP.NET web project & test page which has only telerik combobox having this skin applied and checked. It works..! But when we apply same skin inside our project, arrow is not showing on the IE . For further troubleshooting inside our project,  we copied the test page that has only Radcombo applied with this skin, but no luck. We have used the same CSS in the isolation project that is in our main project, still doesn't show in our project in IE. Any explanation or guesses at what's happening?

Here is the code

WebForm:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Telerik_Test.WebForm1" %>
 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!DOCTYPE html>
 
<head runat="server">
    <title></title>
     
    <link rel="stylesheet" type="text/css" href="/Branding2015/CSS/Telerik_Skins/ComboBox.evalueBC.css" />
    
 
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
             
                <telerik:RadComboBox ID="rcboStatReportTypes" runat="server" Width="250" MaxHeight="300" AutoPostBack="true" Skin="evalueBC" EnableEmbeddedSkins="false" />
             
        </div>
    </form>
</body>
</html>

 

CSS:

 

.RadComboBox_evalueBC
{
    color:#000;font-size:12px;font-family:"Segoe UI",Arial,Helvetica,sans-serif
 
}
.RadComboBox_evalueBC .rcbInputCell,.RadComboBox_evalueBC .rcbArrowCell{
    height:20px;border-width:1px;border-style:solid
 
}
.RadComboBox_evalueBC table td.rcbInputCell,.RadComboBox_evalueBC table td.rcbArrowCell{border-width:1px}
.RadComboBox_evalueBC .rcbInputCell{border-color:#e5e5e5;color:#000;background-color:#fff}
.RadComboBox_evalueBC table td.rcbInputCellLeft{border-right-width:0}
.RadComboBox_evalueBC table td.rcbInputCellRight{border-left-width:0}
.RadComboBox_evalueBC .rcbInput{height:17px;color:#000;font-size:12px;font-family:"Segoe UI",Arial,Helvetica,sans-serif;line-height:16px}
.RadComboBox_evalueBC .rcbEmptyMessage{color:#bbb}.RadComboBox_evalueBC .rcbArrowCell{border-color:#e5e5e5;color:#000;background-color:#f9f9f9}                                                 
.RadComboBox_evalueBC .rcbArrowCell a{width:16px;height:20px;background-image:url('Common/radActionsSprite.png');background-position:-2px -20px;background-repeat:no-repeat}
.RadComboBox_evalueBC .rcbArrowCellHidden,.RadComboBox_evalueBC .rcbArrowCellHidden a{width:0}.RadComboBox_evalueBC .rcbArrowCellHidden.rcbArrowCellLeft{border-right-width:0}
.RadComboBox_evalueBC .rcbArrowCellHidden.rcbArrowCellRight{border-left-width:0}
                                                                                               
.RadComboBox_evalueBC .rcbReadOnly .rcbArrowCellLeft{border-right-width:0}                                                                                            
.RadComboBox_evalueBC .rcbReadOnly .rcbArrowCellRight{border-left-width:0}
.RadComboBox_evalueBC .rcbHovered .rcbInputCell{border-color:#e5e5e5;color:#000;background-color:#fff}
.RadComboBox_evalueBC .rcbHovered .rcbInput{color:#000}
.RadComboBox_evalueBC .rcbHovered .rcbArrowCell{border-color:#e5e5e5;color:#000;background-color:#e5e5e5}
.RadComboBox_evalueBC .rcbHovered .rcbArrowCell a{background-position:-2px -20px}
.RadComboBox_evalueBC .rcbFocused .rcbInputCell{border-color:#25a0da;color:#000;background-color:#fff}
.RadComboBox_evalueBC .rcbFocused .rcbInput{color:#000}
.RadComboBox_evalueBC .rcbFocused .rcbArrowCell{border-color:#25a0da;color:#fff;background-color:#25a0da}
.RadComboBox_evalueBC .rcbFocused .rcbArrowCell a{background-position:-42px -20px}
.RadComboBox_evalueBC .rcbReadOnly .rcbInputCell{border-color:#e5e5e5;background-color:#f9f9f9;color:#000}
.RadComboBox_evalueBC .rcbReadOnly .rcbInput{color:#000}
.RadComboBox_evalueBC .rcbHovered .rcbReadOnly .rcbInputCell{border-color:#e5e5e5;color:#000;background-color:#e5e5e5}
.RadComboBox_evalueBC .rcbHovered .rcbReadOnly .rcbInput{color:#000}
.RadComboBox_evalueBC .rcbFocused .rcbReadOnly .rcbInputCell{border-color:#25a0da;color:#fff;background-color:#25a0da}
.RadComboBox_evalueBC .rcbFocused .rcbReadOnly .rcbInput{color:#fff}
.RadComboBoxDropDown_evalueBC{border-color:#cdcdcd;color:#000;background-color:#fff;font-size:12px;font-family:"Segoe UI",Arial,Helvetica,sans-serif}
.RadComboBoxDropDown_evalueBC .rcbHeader,.RadComboBoxDropDown_evalueBC .rcbFooter{color:#000;background-color:#e8e8e8}
.RadComboBoxDropDown_evalueBC .rcbHeader{border-bottom-color:#e5e5e5}.RadComboBoxDropDown_evalueBC .rcbFooter{border-top-color:#e5e5e5}
.RadComboBoxDropDown_evalueBC .rcbHovered{color:#000;background-color:#e8e8e8}
.RadComboBoxDropDown_evalueBC .rcbSelected{color:#fff;background-color:#25a0da}
.RadComboBoxDropDown_evalueBC .rcbLoading{color:#000;background-color:#e8e8e8}
.RadComboBoxDropDown_evalueBC .rcbItem em{color:#000;background-color:#e8e8e8}
.RadComboBoxDropDown_evalueBC .rcbCheckAllItems{border-color:#e5e5e5;color:#000;background-color:#e8e8e8}
.RadComboBoxDropDown_evalueBC .rcbMoreResults{border-color:#e5e5e5;color:#000;background-color:#e8e8e8}
.RadComboBoxDropDown_evalueBC .rcbSeparator{color:#fff;background:#e8e8e8}
 
 div.RadComboBox_evalueBC .rcbInputCell {
 
    background-color: rgb(234, 234, 234);
 
}
 
 div.RadComboBox_evalueBC .rcbArrowCell {
 
    background-image: none;
 
    background-color: rgb(237, 237, 237);
 
    background-repeat: no-repeat;
 
}
 
 div.RadComboBox_evalueBC .rcbFocused .rcbInputCell {
 
    border-color: rgb(7, 129, 154);
 
    background-color: rgb(7, 129, 154);
 
}
 
 div.RadComboBox_evalueBC .rcbFocused .rcbInput {
 
    color: rgb(255, 255, 255);
 
}
 
 div.RadComboBox_evalueBC .rcbFocused .rcbArrowCell {
 
    background-color: rgb(7, 129, 154);
 
}

Thanks much,

Craig

4 Answers, 1 is accepted

Sort by
0
Craig
Top achievements
Rank 2
answered on 28 Oct 2015, 11:41 PM

A little more info:

Browser:

IE 11 on Windows 7 Enterprise.

IE 11 version : 11.0.9600.17728
Update Versions : 11.0.18 (KB3038314)

Version of Telerik Controls: 2015.2.623.40

 

0
Ivan Danchev
Telerik team
answered on 02 Nov 2015, 03:35 PM
Hello Craig,

I am afraid I was not able to reproduce the missing arrow at my side. I am attaching a sample runnable project that contains a RadComboBox with the evalueBC skin set. Could you please try running it and check whether you can reproduce the issue in it? Also you can inspect your original project's page with the browser's developer tools and check whether the path to the sprite image is correct and it is loaded correctly, as shown in this screenshot.

Regards,
Ivan Danchev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Craig
Top achievements
Rank 2
answered on 20 Nov 2015, 04:03 PM

Hi, 

 Thanks for the reply. This was resolved by simply removing and re-adding the Telerik skins dll. Suddenly the arrow started to show!

 Cheers,

Craig

 

0
Nencho
Telerik team
answered on 25 Nov 2015, 11:36 AM
Hello Craig,

Thank you for sharing your solution with the community.

Regards,
Nencho
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
ComboBox
Asked by
Craig
Top achievements
Rank 2
Answers by
Craig
Top achievements
Rank 2
Ivan Danchev
Telerik team
Nencho
Telerik team
Share this question
or