Hi
I am using a rad combo box in our application, And we are using custom skin for combo box. there is a requirement to show scroll options. With custom skin horizontal scroll bar is working as expected, but along with horizontal scroll bar always vertical scroll bar is appearing even though it is not necessary. And the hover item style is not applying for entire item.
Please have a look at the combo box screen shots, mark up and the custom skin. And suggest me if you could find any mistake on that.
Thanks in advance,
Balaji Velasiri
Markup:
<telerik:RadComboBox ID="radDefaultMember" EnableEmbeddedBaseStylesheet="false" EnableScreenBoundaryDetection="false"
EnableEmbeddedSkins="false" Skin="SSComboBoxSkin" runat="server" Width="100%">
</telerik:RadComboBox>
Custom skin:
/* RadComboBox Darkgrey skin */
/*make the width of the rcbInput 205 px */
/*global*/
div.RadComboBox_SSComboBoxSkin *
{
margin: 0;
padding: 0;
}
div.RadComboBox_SSComboBoxSkin, div.RadComboBox_SSComboBoxSkin .rcbInput, .RadComboBoxDropDown_SSComboBoxSkin
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
font-weight: bold;
text-align: left; /*height:25px;*/
}
div.RadComboBox_SSComboBoxSkin_rtl, div.RadComboBox_SSComboBoxSkin_rtl .rcbInput, .RadComboBoxDropDown_SSComboBoxSkin_rtl
{
text-align: right;
}
/* combobox */
div.RadComboBox_SSComboBoxSkin
{
vertical-align: top;
}
* html div.RadComboBox_SSComboBoxSkin
{
vertical-align: top;
}
div.RadComboBox_SSComboBoxSkin table
{
border: 0;
border-collapse: collapse;
}
div.RadComboBox_SSComboBoxSkin table td.rcbInputCell
{
width: 100%;
height: 23px;
line-height: 21px;
vertical-align: top;
padding: 0;
border: 0;
}
div.RadComboBox_SSComboBoxSkin .rcbInputCellLeft, div.RadComboBox_SSComboBoxSkin .rcbInputCellRight, div.RadComboBox_SSComboBoxSkin .rcbArrowCellLeft, div.RadComboBox_SSComboBoxSkin .rcbArrowCellRight
{
background: url('ComboBox/rcbSprite.png') no-repeat;
}
* html div.RadComboBox_SSComboBoxSkin .rcbInputCellLeft, * html div.RadComboBox_SSComboBoxSkin .rcbInputCellRight, * html div.RadComboBox_SSComboBoxSkin .rcbArrowCellLeft, * html div.RadComboBox_SSComboBoxSkin .rcbArrowCellRight
{
background: url('ComboBox/rcbSpriteIE6.gif') no-repeat;
}
div.RadComboBox_SSComboBoxSkin td.rcbInputCellLeft
{
background-position: 0 -161px;
}
div.RadComboBox_SSComboBoxSkin td.rcbInputCellRight
{
background-position: 100% -161px;
}
div.RadComboBox_SSComboBoxSkin .rcbHovered td.rcbInputCellLeft
{
background-position: 0 -161px;
}
div.RadComboBox_SSComboBoxSkin .rcbHovered td.rcbInputCellRight
{
background-position: 100% -161px;
}
div.RadComboBox_SSComboBoxSkin .rcbFocused td.rcbInputCellLeft
{
background-position: 0 -161px;
}
div.RadComboBox_SSComboBoxSkin .rcbFocused td.rcbInputCellRight
{
background-position: 100% -161px;
}
div.RadComboBox_SSComboBoxSkin .rcbReadOnly .rcbInputCellLeft
{
background-position: 0 0;
}
div.RadComboBox_SSComboBoxSkin .rcbReadOnly .rcbInputCellRight
{
background-position: 100% 0;
}
div.RadComboBox_SSComboBoxSkin .rcbHovered .rcbReadOnly td.rcbInputCellLeft
{
background-position: 0 -23px;
}
div.RadComboBox_SSComboBoxSkin .rcbHovered .rcbReadOnly td.rcbInputCellRight
{
background-position: 100% -23px;
}
div.RadComboBox_SSComboBoxSkin .rcbFocused .rcbReadOnly td.rcbInputCellLeft
{
background-position: 0 -46px;
}
div.RadComboBox_SSComboBoxSkin .rcbFocused .rcbReadOnly td.rcbInputCellRight
{
background-position: 100% -46px;
}
div.RadComboBox_SSComboBoxSkin .rcbInputCell .rcbInput
{
width: 100%;
background: transparent;
border: 0;
vertical-align: top;
padding: 4px 0 0;
outline: 0;
}
div.RadComboBox_SSComboBoxSkin .rcbInputCell .rcbEmptyMessage
{
color: #ccc;
font-style: italic;
}
div.RadComboBox_SSComboBoxSkin .rcbReadOnly .rcbInput
{
cursor: default;
}
div.RadComboBox_SSComboBoxSkin table td.rcbInputCell, div.RadComboBox_SSComboBoxSkin .rcbInputCell .rcbInput
{
padding-left: 5px;
}
div.RadComboBox_SSComboBoxSkin_rtl table td.rcbInputCell, div.RadComboBox_SSComboBoxSkin_rtl .rcbInputCell .rcbInput
{
padding-right: 2px;
padding-left: 0;
}
div.RadComboBox_SSComboBoxSkin .rcbHovered .rcbInputCell .rcbInput
{
color: #ffffff;
}
div.RadComboBox_SSComboBoxSkin .rcbDisabled .rcbInputCell .rcbInput
{
color: #ebebeb;
}
div.RadComboBox_SSComboBoxSkin table td.rcbArrowCell
{
width: 24px !important;
padding: 0;
border: 0;
}
div.RadComboBox_SSComboBoxSkin td.rcbArrowCellLeft
{
background-position: -25px -92px;
}
div.RadComboBox_SSComboBoxSkin td.rcbArrowCellRight
{
background-position: 0 -92px;
}
div.RadComboBox_SSComboBoxSkin .rcbHovered .rcbArrowCellLeft
{
background-position: -75px -92px;
}
div.RadComboBox_SSComboBoxSkin .rcbHovered .rcbArrowCellRight
{
background-position: -50px -92px;
}
div.RadComboBox_SSComboBoxSkin .rcbFocused .rcbArrowCellLeft
{
background-position: -125px -92px;
}
div.RadComboBox_SSComboBoxSkin .rcbFocused .rcbArrowCellRight
{
background-position: -100px -92px;
}
div.RadComboBox_SSComboBoxSkin td.rcbArrowCellHidden, div.RadComboBox_SSComboBoxSkin .rcbHovered td.rcbArrowCellHidden, div.RadComboBox_SSComboBoxSkin .rcbFocused td.rcbArrowCellHidden
{
background-position: 100% -161px;
}
div.RadComboBox_SSComboBoxSkin table.rcbDisabled td.rcbArrowCellHidden
{
background-position: -172px -92px;
}
/*25 x 7 - 3 = 172*/
div.RadComboBox_SSComboBoxSkin .rcbHovered .rcbReadOnly td.rcbArrowCellHidden
{
background-position: -72px -92px;
}
/*25 x 3 -3 = 72*/
div.RadComboBox_SSComboBoxSkin .rcbFocused .rcbReadOnly td.rcbArrowCellHidden
{
background-position: -122px -92px;
}
/*25 x 5 -3 = 122*/
div.RadComboBox_SSComboBoxSkin .rcbArrowCell a
{
position: relative;
outline: 0;
overflow: hidden;
display: block;
width: 25px;
height: 23px;
text-decoration: none;
text-indent: -9999px;
font-size: 1px;
}
divdiv.RadComboBox_SSComboBoxSkin td.rcbArrowCellHidden, divdiv.RadComboBox_SSComboBoxSkin .rcbArrowCellHidden a
{
width: 3px;
}
/* Read-only styles */
div.RadComboBox_SSComboBoxSkin .rcbReadOnly td.rcbArrowCell
{
width: 23px;
}
/*25-2*/
div.RadComboBox_SSComboBoxSkin .rcbReadOnly td.rcbArrowCell a
{
width: 25px;
}
/*this is important */
div.RadComboBox_SSComboBoxSkin .rcbReadOnly td.rcbArrowCellLeft
{
background-position: -25px -92px;
}
div.RadComboBox_SSComboBoxSkin .rcbReadOnly td.rcbArrowCellRight
{
background-position: 0px -92px;
}
div.RadComboBox_SSComboBoxSkin .rcbHovered .rcbReadOnly .rcbArrowCellLeft
{
background-position: -75px -92px;
}
div.RadComboBox_SSComboBoxSkin .rcbHovered .rcbReadOnly .rcbArrowCellRight
{
background-position: -50px -92px;
}
/* 25 * 2 =50 */
div.RadComboBox_SSComboBoxSkin .rcbFocused .rcbReadOnly .rcbArrowCellLeft
{
background-position: -125px -92px;
}
div.RadComboBox_SSComboBoxSkin .rcbFocused .rcbReadOnly .rcbArrowCellRight
{
background-position: -100px -92px;
}
/*25 x 4=100 *//*this is important */
div.RadComboBox_SSComboBoxSkin .rcbReadOnly td.rcbArrowCellHidden, div.RadComboBox_SSComboBoxSkin .rcbReadOnly td.rcbArrowCellHidden a
{
width: 3px;
}
div.RadComboBox_SSComboBoxSkin .rcbReadOnly td.rcbArrowCellHidden
{
background-position: -22px -92px;
}
/*25-3 = 22*/
div.RadComboBox_SSComboBoxSkin .rcbHovered .rcbReadOnly td.rcbArrowCellHidden
{
background-position: -72px -92px;
}
/*25 * 3 - 3 = 72*/
div.RadComboBox_SSComboBoxSkin .rcbFocused .rcbReadOnly td.rcbArrowCellHidden
{
background-position: -122px -92px;
}
/*25 * 5 - 3 =122 */
/* dropdown */
.rcbSlide
{
position: absolute;
overflow: hidden;
display: none;
_height: 1px;
float: left;
width:100%;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbHeader, .RadComboBoxDropDown_SSComboBoxSkin .rcbFooter, .RadComboBoxDropDown_SSComboBoxSkin .rcbMoreResults, .RadComboBoxDropDown_SSComboBoxSkin .rcbMoreResults a
{
background-image: url('ComboBox/rcbSprite.png');
background-repeat: no-repeat;
}
* html .RadComboBoxDropDown_SSComboBoxSkin .rcbHeader, * html .RadComboBoxDropDown_SSComboBoxSkin .rcbFooter, * html .RadComboBoxDropDown_SSComboBoxSkin .rcbMoreResults, * html .RadComboBoxDropDown_SSComboBoxSkin .rcbMoreResults a
{
background-image: url('ComboBox/rcbSpriteIE6.gif');
background-repeat: no-repeat;
}
.RadComboBoxDropDown_SSComboBoxSkin
{
/* Commented to work with latest telerik v 2010.1.309.35 position: absolute; background: #999999; cursor: default; font-size: 11px; color: #fff; */ /* see Below work with latest telerik v 2010.1.309.35*/
position: absolute;
background: #fff;
border-collapse: collapse;
border-right: none;
border-bottom: :none;
border-left-style: none;
border-top-style: none;
cursor: default;
font-size: 11px;
font-weight: normal;
color: #fff;
padding: 1px 1px;
background-color: #999999;
color: #fff;
}
.RadComboBoxDropDown_SSComboBoxSkin_rtl
{
text-align: right;
direction: rtl;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbScroll
{
overflow: auto;
position: relative;
scrollbar-arrow-color: white;
scrollbar-face-color: #D8F4AE;
scrollbar-track-color: white;
scrollbar-3dlight-color: white;
scrollbar-darkshadow-color: white;
scrollbar-base-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: white;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbList
{
list-style: none;
position: relative;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbHeader, .RadComboBoxDropDown_SSComboBoxSkin .rcbFooter
{
background-repeat: repeat-x;
background-color: #666666;
background-position: 0 -115px;
padding: 5px 7px 4px;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbHeader
{
border-bottom: 1px solid #8d8d8d;
margin-bottom: 1px;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbFooter
{
border-top: 1px solid #8d8d8d;
margin-top: 1px;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbNoWrap .rcbItem, .RadComboBoxDropDown_SSComboBoxSkin .rcbNoWrap .rcbHovered, .RadComboBoxDropDown_SSComboBoxSkin .rcbNoWrap .rcbDisabled, .RadComboBoxDropDown_SSComboBoxSkin .rcbNoWrap .rcbLoading
{
white-space: nowrap;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbItem, .RadComboBoxDropDown_SSComboBoxSkin .rcbHovered, .RadComboBoxDropDown_SSComboBoxSkin .rcbDisabled, .RadComboBoxDropDown_SSComboBoxSkin .rcbLoading
{
padding: 4px 19px 2px 6px;
margin: 0 1px;
min-height: 20px;
/*width: 100% !important;*/
white-space:nowrap;
}
* html .RadComboBoxDropDown_SSComboBoxSkin .rcbItem, * html .RadComboBoxDropDown_SSComboBoxSkin .rcbHovered, * html .RadComboBoxDropDown_SSComboBoxSkin .rcbDisabled, * html .RadComboBoxDropDown_SSComboBoxSkin .rcbLoading
{
height: 20px; /*word-break: break-all;*/
}
* + html .RadComboBoxDropDown_SSComboBoxSkin .rcbItem, * + html .RadComboBoxDropDown_SSComboBoxSkin .rcbHovered, * + html .RadComboBoxDropDown_SSComboBoxSkin .rcbDisabled, * + html .RadComboBoxDropDown_SSComboBoxSkin .rcbLoading
{
height: auto; /*word-break: break-all;*/
}
.RadComboBoxDropDown_SSComboBoxSkin_rtl .rcbItem, .RadComboBoxDropDown_SSComboBoxSkin_rtl .rcbHovered, .RadComboBoxDropDown_SSComboBoxSkin_rtl .rcbDisabled, .RadComboBoxDropDown_SSComboBoxSkin_rtl .rcbLoading
{
padding: 4px 6px 2px 19px;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbImage
{
vertical-align: middle;
margin: 0 6px 2px 0;
}
.RadComboBoxDropDown_SSComboBoxSkin_rtl .rcbImage
{
margin: 0 0 2px 6px;
}
.RadComboBoxDropDown_SSComboBoxSkin em
{
font-style: normal;
font-weight: bold;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbItem em
{
background: #e5e5e5;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbItem
{
background-color: #999999;
color: #fff;
height: 25px !important;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbHovered
{
background: #666666;
color: #fff;
height: 25px !important;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbSeparator
{
background: #2e2e2e; /*not sure about this */
color: #fff;
}
div.RadComboBox_SSComboBoxSkin .rcbDisabled .rcbInputCell .rcbInput, .RadComboBoxDropDown_SSComboBoxSkin .rcbDisabled
{
color: #cccccc;
cursor: default;
}
div.RadComboBox_SSComboBoxSkin .rcbDisabled td.rcbInputCellLeft
{
background-position: 0 -69px;
}
/*23 x 3*/
div.RadComboBox_SSComboBoxSkin .rcbDisabled td.rcbInputCellRight
{
background-position: 100% -69px;
}
div.RadComboBox_SSComboBoxSkin .rcbDisabled td.rcbArrowCellLeft
{
background-position: -175px -92px;
}
/*25 x 7 = 175*/
div.RadComboBox_SSComboBoxSkin .rcbDisabled td.rcbArrowCellRight
{
background-position: -152px -92px;
}
/*175-23 = 152*/
.RadComboBoxDropDown_SSComboBoxSkin .rcbLoading
{
background: #f0f0f0;
text-align: center;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbMoreResults
{
clear: both;
border-top: 1px solid #3a3a3a;
background-position: 0 -138px; /*23 x 6 =138*/
background-repeat: repeat-x;
background-color: #454545;
position: relative;
padding: 0 6px 0;
text-align: center;
margin-top: 1px;
color: #fff;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbMoreResults a
{
display: inline-block;
width: 20px;
height: 9px;
background-position: -218px -99px;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
}
* html .RadComboBoxDropDown_SSComboBoxSkin .rcbMoreResults a
{
font-size: 0;
line-height: 0;
text-indent: 0;
}
* + html .RadComboBoxDropDown_SSComboBoxSkin .rcbMoreResults a
{
font-size: 0;
line-height: 0;
text-indent: 0;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbMoreResults span
{
vertical-align: middle;
height: 19px;
line-height: 19px;
display: inline-block;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbSeparatedList .rcbItem, .RadComboBoxDropDown_SSComboBoxSkin .rcbSeparatedList .rcbHovered, .RadComboBoxDropDown_SSComboBoxSkin .rcbSeparatedList .rcbDisabled, .RadComboBoxDropDown_SSComboBoxSkin .rcbSeparatedList .rcbLoading
{
padding-left: 12px;
}
.RadComboBoxDropDown_SSComboBoxSkin .rcbSeparatedList .rcbSeparator
{
padding-left: 6px;
}
/*hacks*/
/*Opera start*/
@media screen and (min-width: 550px)
{
.RadComboBoxDropDown_SSComboBoxSkin_rtl .rcbItem, .RadComboBoxDropDown_SSComboBoxSkin_rtl .rcbHovered, .RadComboBoxDropDown_SSComboBoxSkin_rtl .rcbDisabled, .RadComboBoxDropDown_SSComboBoxSkin_rtl .rcbLoading
{
padding: 2px 6px 2px 19px;
}
:root div.RadComboBox_SSComboBoxSkin .rcbInputCell .rcbInput
{
margin-top: 2px;
}
}
/*Opera end*/
1 Answer, 1 is accepted
0
Hello Balaji,
The vertical scroll appears because the height of the drop down is incorrectly calculated if there is a horizontal scroll. You can avoid this if you increase the height of the drop down a bit or handle the DropDownOpened event in this way:
As for the second issue, you can use the following style to avoid it:
I hope this helps.
Regards,
Simon
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items.
The vertical scroll appears because the height of the drop down is incorrectly calculated if there is a horizontal scroll. You can avoid this if you increase the height of the drop down a bit or handle the DropDownOpened event in this way:
function onDropDownOpened(sender) { var rcbScroll = sender.get_dropDownElement().firstChild; setTimeout(function() { var scrollHeight = rcbScroll.scrollHeight; var clientHeight = rcbScroll.clientHeight; if (scrollHeight > clientHeight) rcbScroll.style.height = scrollHeight + Telerik.Web.UI.RadComboBox._getScrollBarWidth() + "px"; }, 500);}As for the second issue, you can use the following style to avoid it:
div.RadComboBoxDropDown .rcbList{ display: inline-block;}div.RadComboBoxDropDown .rcbItem,div.RadComboBoxDropDown .rcbHovered{ display: inline-block; white-space: nowrap; width: 100%;}I hope this helps.
Regards,
Simon
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items.