I have just created a combobox on my page and need to skin it so it fits with my site and have come across an issue that I can't figure out.
When an item is selected in the combobox that has a length greater than that of the control, the text for the selected value over runs slightly and text appears outside of the input area and over the arrow icon on the end. I have attached a blown up screen shot of my control to show what I mean.
Below is the code used to build my control, as well as the stylesheet which I have properly referenced in my page.
Can anyone spot whats causing this and how I'd go about fixing it?
Thanks
Karl
and the stylesheet...
When an item is selected in the combobox that has a length greater than that of the control, the text for the selected value over runs slightly and text appears outside of the input area and over the arrow icon on the end. I have attached a blown up screen shot of my control to show what I mean.
Below is the code used to build my control, as well as the stylesheet which I have properly referenced in my page.
Can anyone spot whats causing this and how I'd go about fixing it?
Thanks
Karl
<
telerik:RadComboBox
id
=
"Test15"
runat
=
"server"
width
=
"200px"
Skin
=
"Probitas"
EnableEmbeddedSkins
=
"false"
EmptyMessage
=
"Select a value..."
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
"One"
Value
=
"1"
/>
<
telerik:RadComboBoxItem
Text
=
"Two"
Value
=
"2"
/>
<
telerik:RadComboBoxItem
Text
=
"Three"
Value
=
"3"
/>
<
telerik:RadComboBoxItem
Text
=
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
Value
=
"All"
/>
</
Items
>
</
telerik:RadComboBox
>
and the stylesheet...
/* 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: #cc0000;
background: #0000cc;
/*
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;
}