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.
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
0
Shinu
Top achievements
Rank 2
answered on 14 Mar 2014, 06:24 AM
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:
Thanks,
Shinu.
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
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
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.