Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Does anyone know if this layout still exists?

3 Answers 53 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Lex
Top achievements
Rank 1
Lex asked on 13 Mar 2014, 05:47 PM
correct-combobox.gif
I'm currently upgrading Telerik for our company, however it looks like the combo box layout that we used to use isn't there anymore.

I was hoping we would have the images that were used here, however it looks like we are missing those.

Attached is a screenshot of the combobox that we are using.

3 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 14 Mar 2014, 06:24 AM
combo.png
Hi Lex,

Please have a look into the sample code snippet which works fine at my end. Please provide your full code with CSS that I can reproduce the issue at my end for further help.

ASPX:
<telerik:RadComboBox ID="RadComboBox1" runat="server">
    <Items>
        <telerik:RadComboBoxItem Text="Item1" />
        <telerik:RadComboBoxItem Text="Item2" />
    </Items>
</telerik:RadComboBox>

Thanks,
Shinu.
0
Lex
Top achievements
Rank 1
answered on 14 Mar 2014, 09:16 AM
Please see my css below. I'm currently using the default skin of the latest version.

.RadComboBox_newSkin {
   color: #333333;
   font: normal 12px "Segoe UI", Arial, Helvetica, sans-serif;
   line-height: 16px;
}
 
   .RadComboBox_newSkin .rcbInputCell,
   .RadComboBox_newSkin .rcbArrowCell {
      background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSprite.png")%>');
      _background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSpriteIE6.png")%>');
   }
 
   .RadComboBox_newSkin .rcbInputCellLeft {
      background-position: 0 0;
   }
 
   .RadComboBox_newSkin .rcbInputCellRight {
      background-position: 100% 0;
   }
 
   .RadComboBox_newSkin .rcbInput {
      color: #333333;
      font: normal 12px "Segoe UI", Arial, Helvetica, sans-serif;
      line-height: 16px;
   }
 
   .RadComboBox_newSkin .rcbEmptyMessage {
      font-style: italic;
      color: #8a8a8a;
   }
 
   .RadComboBox_newSkin .rcbArrowCellLeft {
      background-position: 0 -176px;
   }
 
   .RadComboBox_newSkin .rcbArrowCellRight {
      background-position: -18px -176px;
   }
 
   .RadComboBox_newSkin .rcbArrowCellLeft.rcbArrowCellHidden {
      background-position: 0 0;
   }
 
   .RadComboBox_newSkin .rcbArrowCellRight.rcbArrowCellHidden {
      background-position: 100% 0;
   }
 
   .RadComboBox_newSkin .rcbHovered .rcbInputCellLeft {
      background-position: 0 -22px;
   }
 
   .RadComboBox_newSkin .rcbHovered .rcbInputCellRight {
      background-position: 100% -22px;
   }
 
   .RadComboBox_newSkin .rcbHovered .rcbInput {
      color: black;
   }
 
   .RadComboBox_newSkin .rcbHovered .rcbArrowCellLeft {
      background-position: -36px -176px;
   }
 
   .RadComboBox_newSkin .rcbHovered .rcbArrowCellRight {
      background-position: -54px -176px;
   }
 
   .RadComboBox_newSkin .rcbHovered .rcbArrowCellLeft.rcbArrowCellHidden {
      background-position: 0 -22px;
   }
 
   .RadComboBox_newSkin .rcbHovered .rcbArrowCellRight.rcbArrowCellHidden {
      background-position: 100% -22px;
   }
 
   .RadComboBox_newSkin .rcbFocused .rcbInputCellLeft {
      background-position: 0 -44px;
   }
 
   .RadComboBox_newSkin .rcbFocused .rcbInputCellRight {
      background-position: 100% -44px;
   }
 
   .RadComboBox_newSkin .rcbFocused .rcbInput {
      color: black;
   }
 
   .RadComboBox_newSkin .rcbFocused .rcbArrowCellLeft {
      background-position: -72px -176px;
   }
 
   .RadComboBox_newSkin .rcbFocused .rcbArrowCellRight {
      background-position: -90px -176px;
   }
 
   .RadComboBox_newSkin .rcbFocused .rcbArrowCellLeft.rcbArrowCellHidden {
      background-position: 0 -44px;
   }
 
   .RadComboBox_newSkin .rcbFocused .rcbArrowCellRight.rcbArrowCellHidden {
      background-position: 100% -44px;
   }
 
   .RadComboBox_newSkin .rcbDisabled .rcbInputCellLeft {
      background-position: 0 -66px;
   }
 
   .RadComboBox_newSkin .rcbDisabled .rcbInputCellRight {
      background-position: 100% -66px;
   }
 
   .RadComboBox_newSkin .rcbDisabled .rcbInput {
      color: #a5a5a5;
   }
 
   .RadComboBox_newSkin .rcbDisabled .rcbArrowCellLeft {
      background-position: -108px -176px;
   }
 
   .RadComboBox_newSkin .rcbDisabled .rcbArrowCellRight {
      background-position: -126px -176px;
   }
 
   .RadComboBox_newSkin .rcbDisabled .rcbArrowCellLeft.rcbArrowCellHidden {
      background-position: 0 -66px;
   }
 
   .RadComboBox_newSkin .rcbDisabled .rcbArrowCellRight.rcbArrowCellHidden {
      background-position: 100% -66px;
   }
 
   .RadComboBox_newSkin .rcbReadOnly .rcbInputCellLeft {
      background-position: 0 -88px;
   }
 
   .RadComboBox_newSkin .rcbReadOnly .rcbInputCellRight {
      background-position: 100% -88px;
   }
 
   .RadComboBox_newSkin .rcbReadOnly .rcbInput {
      color: #333333;
   }
 
   .RadComboBox_newSkin .rcbReadOnly .rcbArrowCellLeft {
      background-position: -144px -176px;
   }
 
   .RadComboBox_newSkin .rcbReadOnly .rcbArrowCellRight {
      background-position: -162px -176px;
   }
 
   .RadComboBox_newSkin .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden {
      background-position: 0 -88px;
   }
 
   .RadComboBox_newSkin .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
      background-position: 100% -88px;
   }
 
   .RadComboBox_newSkin .rcbHovered .rcbReadOnly .rcbInputCellLeft {
      background-position: 0 -110px;
   }
 
   .RadComboBox_newSkin .rcbHovered .rcbReadOnly .rcbInputCellRight {
      background-position: 100% -110px;
   }
 
   .RadComboBox_newSkin .rcbHovered .rcbReadOnly .rcbInput {
      color: black;
   }
 
   .RadComboBox_newSkin .rcbHovered .rcbReadOnly .rcbArrowCellLeft {
      background-position: -180px -176px;
   }
 
   .RadComboBox_newSkin .rcbHovered .rcbReadOnly .rcbArrowCellRight {
      background-position: -198px -176px;
   }
 
   .RadComboBox_newSkin .rcbHovered .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden {
      background-position: 0 -110px;
   }
 
   .RadComboBox_newSkin .rcbHovered .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
      background-position: 100% -110px;
   }
 
   .RadComboBox_newSkin .rcbFocused .rcbReadOnly .rcbInputCellLeft {
      background-position: 0 -132px;
   }
 
   .RadComboBox_newSkin .rcbFocused .rcbReadOnly .rcbInputCellRight {
      background-position: 100% -132px;
   }
 
   .RadComboBox_newSkin .rcbFocused .rcbReadOnly .rcbInput {
      color: black;
   }
 
   .RadComboBox_newSkin .rcbFocused .rcbReadOnly .rcbArrowCellLeft {
      background-position: -216px -176px;
   }
 
   .RadComboBox_newSkin .rcbFocused .rcbReadOnly .rcbArrowCellRight {
      background-position: -234px -176px;
   }
 
   .RadComboBox_newSkin .rcbFocused .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden {
      background-position: 0 -132px;
   }
 
   .RadComboBox_newSkin .rcbFocused .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
      background-position: 100% -132px;
   }
 
   .RadComboBox_newSkin .rcbDisabled .rcbReadOnly .rcbInputCellLeft {
      background-position: 0 -154px;
   }
 
   .RadComboBox_newSkin .rcbDisabled .rcbReadOnly .rcbInputCellRight {
      background-position: 100% -154px;
   }
 
   .RadComboBox_newSkin .rcbDisabled .rcbReadOnly .rcbInput {
      color: #a5a5a5;
   }
 
   .RadComboBox_newSkin .rcbDisabled .rcbReadOnly .rcbArrowCellLeft {
      background-position: -252px -176px;
   }
 
   .RadComboBox_newSkin .rcbDisabled .rcbReadOnly .rcbArrowCellRight {
      background-position: -270px -176px;
   }
 
   .RadComboBox_newSkin .rcbDisabled .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden {
      background-position: 0 -154px;
   }
 
   .RadComboBox_newSkin .rcbDisabled .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
      background-position: 100% -154px;
   }
 
.RadComboBoxDropDown_newSkin {
   border-color: #8a8a8a;
   color: #333333;
   background: white;
   font: normal 12px "Segoe UI", Arial, Helvetica, sans-serif;
   line-height: 16px;
}
 
   .RadComboBoxDropDown_newSkin .rcbHeader,
   .RadComboBoxDropDown_newSkin .rcbFooter {
      color: #333333;
      background-color: #eaeaea;
      background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSprite.png")%>');
      _background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSpriteIE6.png")%>');
      background-position: 0 -500px;
   }
 
   .RadComboBoxDropDown_newSkin .rcbHeader {
      border-bottom-color: #8a8a8a;
   }
 
   .RadComboBoxDropDown_newSkin .rcbFooter {
      border-top-color: #8a8a8a;
   }
 
   .RadComboBoxDropDown_newSkin .rcbHovered {
      color: black;
      background: #dfdfdf;
   }
 
   .RadComboBoxDropDown_newSkin .rcbDisabled {
      color: #a5a5a5;
      background-color: transparent;
   }
 
   .RadComboBoxDropDown_newSkin .rcbLoading {
      color: black;
      background: #dfdfdf;
   }
 
   .RadComboBoxDropDown_newSkin .rcbItem em,
   .RadComboBoxDropDown_newSkin .rcbHovered em {
      color: black;
      background: #dfdfdf;
   }
 
   .RadComboBoxDropDown_newSkin .rcbCheckAllItems {
      color: #333333;
      background-color: #eaeaea;
   }
 
   .RadComboBoxDropDown_newSkin .rcbCheckAllItemsHovered {
      color: #333333;
      background-color: #eaeaea;
   }
 
   .RadComboBoxDropDown_newSkin .rcbMoreResults {
      border-top-color: #8a8a8a;
      color: #333333;
      background-color: #eaeaea;
      background-position: 0 -500px;
      background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSprite.png")%>');
      _background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSpriteIE6.png")%>');
   }
 
      .RadComboBoxDropDown_newSkin .rcbMoreResults a {
         background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSprite.png")%>');
         _background-image: url('<%=WebResource("TelerikCustomSkins.newSkin.ComboBox.rcbSpriteIE6.png")%>');
         background-position: -308px -181px;
      }
 
   .RadComboBoxDropDown_newSkin .rcbSeparator {
      color: #ffffff;
      background: #8a8a8a;
   }
0
Accepted
Magdalena
Telerik team
answered on 17 Mar 2014, 10:47 AM
sprites.zip
Hi Lex,

I have tested the CSS code that you have provided. The background positions that are in the CSS that you have provided are set for the sprite radFormSprite.png instead of the rcbSprite.png. Here is the video of the testing and resolving the issue for your reference. If the problem persists, please, make sure that the URLs are correct and the sprite is loaded (I have attached the screenshot for your reference). Please find the radFormSprite.png in the attachment.


Regards,
Magdalena
Telerik
 

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

 
Tags
ComboBox
Asked by
Lex
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Lex
Top achievements
Rank 1
Magdalena
Telerik team
Share this question
or