Hi All,
I have a custom skin for my RadComboBox and wondered if any of you out there could explain to me why the arrow 'box' on the right of the control changes width if I set the "AllowCustomeText" option to true?
I have attached the exact code I'm using to create the issue along with my custom skin. It is worth noting that this custom skin was generated with the Beta version of Teleriks's StyleBuilder ( http://stylebuilder.telerik.com ) . Of course because this is in Beta it's not guaranteed to generate skins with out teething problems and I understand that. That said I'm using Teleriks icon png file.
I've also attached a blown up image of the controls sat on my page and highlighted the difference in width between them. The only difference between the setup of these controls is that the top on has AllowCustomText="True" whereas the bottom one doesn't have the option set at all.
To configure a test page, save my skin, reference it in a new asp.net web page, copy my code in and start debugging.
Relevant ASP.Net mark up:
StyleSheet (ComboBox.Probitas.Css):
I have a custom skin for my RadComboBox and wondered if any of you out there could explain to me why the arrow 'box' on the right of the control changes width if I set the "AllowCustomeText" option to true?
I have attached the exact code I'm using to create the issue along with my custom skin. It is worth noting that this custom skin was generated with the Beta version of Teleriks's StyleBuilder ( http://stylebuilder.telerik.com ) . Of course because this is in Beta it's not guaranteed to generate skins with out teething problems and I understand that. That said I'm using Teleriks icon png file.
I've also attached a blown up image of the controls sat on my page and highlighted the difference in width between them. The only difference between the setup of these controls is that the top on has AllowCustomText="True" whereas the bottom one doesn't have the option set at all.
To configure a test page, save my skin, reference it in a new asp.net web page, copy my code in and start debugging.
Relevant ASP.Net mark up:
<
telerik:RadComboBox
id
=
"Test15"
runat
=
"server"
width
=
"200px"
height
=
"100px"
DropDownWidth
=
"200px"
AllowCustomText
=
"true"
EmptyMessage
=
"Select an option..."
Skin
=
"Probitas"
EnableEmbeddedSkins
=
"false"
onClientDropDownClosing
=
"AlignDropDownCaretLeft"
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
"Short option"
Value
=
"1"
/>
<
telerik:RadComboBoxItem
Text
=
"AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890"
Value
=
"2"
/>
<
telerik:RadComboBoxItem
Text
=
"aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ0123456789"
Value
=
"3"
/>
<
telerik:RadComboBoxItem
Text
=
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz9876543210"
Value
=
"4"
/>
<
telerik:RadComboBoxItem
Text
=
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ9876543210"
Value
=
"5"
/>
</
Items
>
</
telerik:RadComboBox
><
br
/>
<
br
/>
<
telerik:RadComboBox
id
=
"Test16"
runat
=
"server"
width
=
"200px"
height
=
"100px"
DropDownWidth
=
"200px"
AllowCustomText
=
"false"
EmptyMessage
=
"Select an option..."
Skin
=
"Probitas"
EnableEmbeddedSkins
=
"false"
onClientDropDownClosing
=
"AlignDropDownCaretLeft"
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
"Short option"
Value
=
"1"
/>
<
telerik:RadComboBoxItem
Text
=
"AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890"
Value
=
"2"
/>
<
telerik:RadComboBoxItem
Text
=
"aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ0123456789"
Value
=
"3"
/>
<
telerik:RadComboBoxItem
Text
=
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz9876543210"
Value
=
"4"
/>
<
telerik:RadComboBoxItem
Text
=
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ9876543210"
Value
=
"5"
/>
</
Items
>
</
telerik:RadComboBox
><
br
/>
StyleSheet (ComboBox.Probitas.Css):
/* RadComboBox Simple skin */
/*global*/
.RadComboBox_Probitas,
.RadComboBox_Probitas .rcbInput,
.RadComboBoxDropDown_Probitas
{
font
:
12px
"Segoe UI"
,
Arial
,
sans-serif
;
color
:
#333
;
}
/* combobox */
div.RadComboBox_Probitas table td.rcbInputCell
{
height
:
18px
;
line-height
:
18px
;
border
:
1px
solid
#10568A
;
background
:
#fff
;
}
* html div.RadComboBox_Probitas table td.rcbInputCell
{
height
/**/
:
20px
;
line-height
/**/
:
20px
;
}
div.RadComboBox_Probitas table td.rcbInputCellLeft {
border-width
:
1px
0
1px
1px
; }
div.RadComboBox_Probitas table td.rcbInputCellRight {
border-width
:
1px
1px
1px
0
; }
* html div.RadComboBox_Probitas .rcbInputCell .rcbInput
{
height
/**/
:
16px
;
padding
/**/
:
2px
0
;
/* This should fix the ajax introduced height in IE7 and not break IE6 */
}
.RadComboBox_Probitas .rcbInputCell .rcbEmptyMessage
{
color
:
#666
;
}
.RadComboBox_Probitas .rcbHovered .rcbInputCell .rcbInput,
.RadComboBox_Probitas .rcbFocused .rcbInputCell .rcbInput {
color
:
#333333
; }
div.RadComboBox_Probitas table td.rcbArrowCell
{
border
:
1px
solid
#10568A
;
background
:
#fff
url
(
'ComboBox/rcbSprite.png'
)
no-repeat
-1px
50%
;
}
div.RadComboBox_Probitas .rcbReadOnly .rcbArrowCellLeft,
div.RadComboBox_Probitas .rcbArrowCellHidden.rcbArrowCellLeft {
border-width
:
1px
1px
1px
1px
; }
div.RadComboBox_Probitas .rcbReadOnly .rcbArrowCellRight,
div.RadComboBox_Probitas .rcbArrowCellHidden.rcbArrowCellRight {
border-width
:
1px
1px
1px
1px
; }
.RadComboBox_Probitas td.rcbArrowCell {
background-position
:
-1px
50%
; }
.RadComboBox_Probitas .rcbHovered .rcbArrowCell {
background-position
:
-21px
50%
; }
.RadComboBox_Probitas .rcbFocused .rcbArrowCell {
background-position
:
-41px
50%
; }
.RadComboBox_Probitas .rcbDisabled .rcbArrowCell {
background-position
:
-61px
50%
; }
.RadComboBox_Probitas .rcbReadOnly td.rcbArrowCell {
background-position
:
-2px
50%
; }
.RadComboBox_Probitas .rcbHovered .rcbReadOnly .rcbArrowCell {
background-position
:
-22px
50%
; }
.RadComboBox_Probitas .rcbFocused .rcbReadOnly .rcbArrowCell {
background-position
:
-42px
50%
; }
.RadComboBox_Probitas .rcbDisabled .rcbReadOnly .rcbArrowCell {
background-position
:
-62px
50%
; }
.RadComboBox_Probitas td.rcbArrowCellHidden,
.RadComboBox_Probitas .rcbHovered td.rcbArrowCellHidden,
.RadComboBox_Probitas .rcbFocused td.rcbArrowCellHidden,
.RadComboBox_Probitas .rcbReadOnly td.rcbArrowCellHidden,
.RadComboBox_Probitas .rcbHovered .rcbReadOnly .rcbArrowCellHidden,
.RadComboBox_Probitas .rcbFocused .rcbReadOnly .rcbArrowCellHidden,
.RadComboBox_Probitas .rcbDisabled .rcbReadOnly .rcbArrowCellHidden,
.RadComboBox_Probitas table.rcbDisabled td.rcbArrowCellHidden
{
/*background: #none; */
background
:
#ffffff
;
}
.RadComboBox_Probitas .rcbHovered .rcbArrowCell,
.RadComboBox_Probitas .rcbHovered .rcbReadOnly .rcbInputCell,
.RadComboBox_Probitas .rcbHovered .rcbReadOnly .rcbArrowCellHidden {
background-color
:
#ffffff
; }
.RadComboBox_Probitas .rcbFocused .rcbArrowCell,
.RadComboBox_Probitas .rcbFocused .rcbReadOnly .rcbInputCell,
.RadComboBox_Probitas .rcbFocused .rcbReadOnly .rcbArrowCellHidden {
background-color
:
#ffffff
; }
div.RadComboBox_Probitas .rcbHovered .rcbArrowCell,
div.RadComboBox_Probitas .rcbHovered .rcbInputCell {
border-color
:
#10568A
; }
div.RadComboBox_Probitas .rcbFocused .rcbArrowCell,
div.RadComboBox_Probitas .rcbFocused .rcbInputCell {
border-color
:
#10568A
; }
div.RadComboBox_Probitas .rcbDisabled .rcbArrowCell,
div.RadComboBox_Probitas .rcbDisabled .rcbInputCell {
border-color
:
#10568A
; }
div.RadComboBox_Probitas .rcbArrowCell a
{
height
:
20px
;
}
div.RadComboBox_Probitas td.rcbArrowCellHidden,
div.RadComboBox_Probitas .rcbArrowCellHidden a
{
width
:
1px
;
}
div.RadComboBox_Probitas td.rcbArrowCellHidden.rcbArrowCellRight
{
border-left
:
1px
solid
#10568A
;
}
/* Read-only styles */
/* dropdown */
.RadComboBoxDropDown_Probitas
{
background
:
#fff
;
border-color
:
#10568A
;
}
.RadComboBoxDropDown_Probitas .rcbHeader,
.RadComboBoxDropDown_Probitas .rcbFooter
{
background
:
#e4e4e4
;
color
:
#000
;
}
.RadComboBoxDropDown_Probitas .rcbHeader
{
border-bottom-color
:
#10568A
;
}
.RadComboBoxDropDown_Probitas .rcbFooter
{
border-top-color
:
#10568A
;
}
.RadComboBoxDropDown_Probitas .rcbItem em
{
background
:
#ffffff
;
}
div.RadComboBoxDropDown_Probitas .rcbHovered
{
background
:
#ffffff
;
color
:
#ffffff
;
border
:
1px
solid
#10568A
;
padding
:
1px
5px
;
}
.RadComboBoxDropDown_Probitas .rcbSeparator
{
color: #fff;
background: #8a8a8a;
}
.RadComboBox_Probitas .rcbDisabled .rcbInputCell .rcbInput,
.RadComboBoxDropDown_Probitas .rcbDisabled
{
color
:
#888888
;
}
.RadComboBoxDropDown_Probitas .rcbLoading
{
background
:
#ffffff
;
}
.RadComboBoxDropDown_Probitas .rcbMoreResults
{
border-top-color
:
#10568A
;
background
:
#ffffff
;
color
:
#333333
;
}
.RadComboBoxDropDown_Probitas .rcbMoreResults a
{
background
:
url
(
'ComboBox/rcbSprite.png'
)
no-repeat
-1px
-85px
;
}
div.RadComboBox_Probitas .rcbInputCell
{
border-color
:
#10568A
;
}
.RadComboBox_Probitas .rcbInput
{
color
:
#000000
;
}
DIV.RadComboBox_Probitas .rcbArrowCell
{
border-color
:
#10568A
;
}
div.RadComboBox_Probitas .rcbHovered .rcbInputCell
{
border-color
:
#10568A
;
}
div.RadComboBox_Probitas .rcbHovered .rcbInput
{
color
:
#000000
;
}
.RadComboBox_Probitas .rcbHovered .rcbArrowCell
{
border-color
:
#10568A
;
background-color
:
#FFFFFF
;
}
div.RadComboBox_Probitas .rcbFocused .rcbInputCell
{
border-color
:
#10568A
;
}
div.RadComboBox_Probitas .rcbFocused .rcbInput
{
color
:
#000000
;
}
div.RadComboBox_Probitas .rcbFocused .rcbArrowCell
{
background-color
:
#FFFFFF
;
}
div.RadComboBox_Probitas .rcbDisabled .rcbInputCell
{
border-color
:
#888888
;
}
div.RadComboBox_Probitas .rcbDisabled .rcbArrowCell
{
border-color
:
#888888
;
}
div.RadComboBoxDropDown_Probitas
{
border-color
:
#10568A
;
}
div.RadComboBoxDropDown_Probitas .rcbHeader
{
background-color
:
#BCD1E1
;
/*light blue*/
}
div.RadComboBoxDropDown_Probitas .rcbHovered
{
border
:
#10568A
1px
solid
;
background-color
:
#BCD1E1
;
color
:
#000000
;
}
/*General*/
div.RadComboBox_Probitas .rcbInputCell
{
border-color
:
#10568A
;
border-right
:
#10568A
1px
solid
;
}
div.RadComboBox_Probitas .rcbArrowCell
{
border-color
:
#10568A
;
}
/*Hovered*/
div.RadComboBox_Probitas .rcbHovered .rcbInputCell
{
border-right
:
#10568A
1px
solid
;
}
div.RadComboBox_Probitas .rcbHovered .rcbInput
{
color
:
#000000
;
}
/*Focused*/
div.RadComboBox_Probitas .rcbFocused .rcbInputCell
{
border-right
:
#10568A
1px
solid
;
border-color
:
#10568A
;
}
div.RadComboBox_Probitas .rcbFocused .rcbInput
{
color
:
#000000
;
}
/*Disabled*/
div.RadComboBox_Probitas .rcbDisabled .rcbInputCell
{
border-right
:
#888888
1px
solid
;
border-color
:
#888888
;
}
div.RadComboBox_Probitas .rcbDisabled .rcbInput
{
color
:
#888888
;
}
div.RadComboBox_Probitas .rcbDisabled .rcbArrowCell
{
border-color
:
#888888
;
color
:
#888888
;
}
div.RadComboBox_Probitas table td.rcbInputCell
{
padding-right
:
5px
;
padding-left
:
0px
;
}