RadComob not showing down arrow while using Custom Skin

5 posts, 0 answers
  1. Craig
    Craig avatar
    10 posts
    Member since:
    Jan 2015

    Posted 28 Oct 2015 Link to this post

    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

  2. Craig
    Craig avatar
    10 posts
    Member since:
    Jan 2015

    Posted 28 Oct 2015 in reply to Craig Link to this post

    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

     

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 02 Nov 2015 Link to this post

    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
  5. Craig
    Craig avatar
    10 posts
    Member since:
    Jan 2015

    Posted 20 Nov 2015 Link to this post

    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

     

  6. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 25 Nov 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017