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

RadComob not showing down arrow while using Custom Skin

4 Answers 172 Views

ComboBox

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

Craig asked on 28 Oct 2015, 11:38 PM

down-arrow-missing-on-ie.jpg

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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

answered on 02 Nov 2015, 03:35 PM

ComboBoxIESkinTest.zip

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadComob not showing down arrow while using Custom Skin

4 Answers, 1 is accepted