how can i change the height of Radcombobox (Not the height of it's dropdown)

[Majid Darab]

hello my dear friends:
i want to change the height of Radcombobox (Not the height of it's dropdown)...
for doing this i changed the height property of rad combobox but it changes the dropdown height...
before doing that i changed the font size of rad combobox and it looks like double layer...
for fix this i need to change the height of rad combobox (only it's text box)
thanks for your attention

[Paul]

The Height property is setting the height of the combobox for me, how do I set the height or number of items that show on the dropdown?

[Vasko]

Hi Paul,

To change the height of the drop-down, you can try the following CSS: 

<style>
    html body .RadComboBoxDropDown  .rcbScroll {
        height: 200px;
    }
</style>

I hope this helps you out.

Kind regards,
Author nickname
Progress Telerik

[Shinu]

Hi Majid,

I hope the following link which discussed about same scenario will help you in setting height for radcombobox input.
How to set the height of the textbox of the RadComboBox

Also checkout the following documentation:
Controlling Appearance

-Shinu.

[Majid Darab]

i really appreciate for your links
i read them but i still have problem
=======================================================
let me start at first step by step:
1-i drag and drap a RadComboBox to my page and set some properties like this :

<telerik:RadComboBox ID="RadcbCompanies" runat="server" AppendDataBoundItems="True"
                                                    DataSourceID="sdsCompany" DataTextField="CoName" DataValueField="ID" EnableEmbeddedSkins="False"
                                                    LoadingMessage="درحال لود شدن ..." RadComboBoxImagePosition="Left" Skin="aaa"
                                                    Width="250px"
                                                    MarkFirstMatch="True">
                                                    <Items>
                                                        <telerik:RadComboBoxItem runat="server" Text="لطفاً یک گزینه را انتخاب نمایید ..." />
                                                    </Items>
                                                </telerik:RadComboBox>

2-i customized Vista Skin (just font-family) and add it's files to my project like this :
see capture.jpg

3-the css file is like this : (here i only change this line --> font: 12px Tahoma, Arial, sans-serif;     and replace all _Vista With _aaa) and every thing is like vista css

/* RadComboBox Vista skin */

/*global*/

.RadComboBox_aaa *
{
    margin: 0;
    padding: 0;
}

.RadComboBox_aaa,
.RadComboBox_aaa .rcbInput,
.RadComboBoxDropDown_aaa
{
    font: 12px Tahoma, Arial, sans-serif;
    color: #333;
    text-align: left;
}

.RadComboBox_aaa_rtl,
.RadComboBox_aaa_rtl .rcbInput,
.RadComboBoxDropDown_aaa_rtl
{
    text-align: rightright;
}

/* combobox */

.RadComboBox_aaa
{
    vertical-align: middle;
}

* html .RadComboBox_aaa { vertical-align: top; }

.RadComboBox_aaa table
{
    border: 0;
    border-collapse: collapse;
}

.RadComboBox_aaa table td.rcbInputCell
{
    width: 100%;
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
    padding: 0;
    border: 0;
}

* html .RadComboBox_aaa td.rcbInputCell
{
    height /**/: 22px;
    line-height /**/: 22px;
}

.RadComboBox_aaa .rcbInputCellLeft,
.RadComboBox_aaa .rcbInputCellRight,
.RadComboBox_aaa .rcbArrowCellLeft,
.RadComboBox_aaa .rcbArrowCellRight
{
    background: url('ComboBox/rcbSprite.png') no-repeat;
}

* html .RadComboBox_aaa .rcbInputCellLeft,
* html .RadComboBox_aaa .rcbInputCellRight,
* html .RadComboBox_aaa .rcbArrowCellLeft,
* html .RadComboBox_aaa .rcbArrowCellRight
{
    background: url('ComboBox/rcbSpriteIE6.png') no-repeat;
}

.RadComboBox_aaa td.rcbInputCellLeft { background-position: 0 0; }
.RadComboBox_aaa td.rcbInputCellRight { background-position: 100% 0; }

.RadComboBox_aaa .rcbHovered .rcbInputCellLeft { background-position: 0 0; }
.RadComboBox_aaa .rcbHovered .rcbInputCellRight { background-position: 100% 0; }

.RadComboBox_aaa .rcbFocused .rcbInputCellLeft { background-position: 0 0; }
.RadComboBox_aaa .rcbFocused .rcbInputCellRight { background-position: 100% 0; }

.RadComboBox_aaa .rcbHovered .rcbReadOnly td.rcbInputCellLeft { background-position: 0 -22px; }
.RadComboBox_aaa .rcbHovered .rcbReadOnly td.rcbInputCellRight { background-position: 100% -22px; }

.RadComboBox_aaa .rcbFocused .rcbReadOnly td.rcbInputCellLeft { background-position: 0 -44px; }
.RadComboBox_aaa .rcbFocused .rcbReadOnly td.rcbInputCellRight { background-position: 100% -44px; }

.RadComboBox_aaa .rcbInputCell .rcbInput
{
    width: 100%;
    background: transparent;
    border: 0;
    vertical-align: middle;
    padding: 2px 0 1px;
    outline: 0;
}

* html .RadComboBox_aaa .rcbInputCell .rcbInput
{
    height /**/: 18px;
    padding /**/: 2px 0 0; /* This should fix the ajax introduced height in IE6 */
}

.RadComboBox_aaa .rcbInputCell .rcbEmptyMessage
{
    color: #666;
    font-style: italic;
}

.RadComboBox_aaa .rcbReadOnly .rcbInput
{
    cursor: default;
}

.RadComboBox_aaa table td.rcbInputCell,
.RadComboBox_aaa .rcbInputCell .rcbInput
{
    padding-left: 2px;
}

.RadComboBox_aaa_rtl table td.rcbInputCell,
.RadComboBox_aaa_rtl .rcbInputCell .rcbInput
{
    padding-right: 2px;
    padding-left: 0;
}

.RadComboBox_aaa .rcbHovered .rcbInputCell .rcbInput
{
    color: #045cb5;
}

.RadComboBox_aaa table td.rcbArrowCell
{
    width: 18px;
    padding: 0;
    border: 0;
}

.RadComboBox_aaa td.rcbArrowCellLeft { background-position: -18px -88px; }
.RadComboBox_aaa td.rcbArrowCellRight { background-position: 0 -88px; }

.RadComboBox_aaa .rcbHovered .rcbArrowCellLeft { background-position: -54px -88px; }
.RadComboBox_aaa .rcbHovered .rcbArrowCellRight { background-position: -36px -88px; }

.RadComboBox_aaa .rcbFocused .rcbArrowCellLeft { background-position: -90px -88px; }
.RadComboBox_aaa .rcbFocused .rcbArrowCellRight { background-position: -72px -88px; }

.RadComboBox_aaa td.rcbArrowCellHidden,
.RadComboBox_aaa .rcbHovered td.rcbArrowCellHidden,
.RadComboBox_aaa .rcbFocused td.rcbArrowCellHidden { background-position: -15px -88px; }
.RadComboBox_aaa table.rcbDisabled td.rcbArrowCellHidden { background-position: -123px -88px; }

.RadComboBox_aaa .rcbHovered .rcbReadOnly td.rcbArrowCellHidden { background-position: -51px -88px; }
.RadComboBox_aaa .rcbFocused .rcbReadOnly td.rcbArrowCellHidden { background-position: -87px -88px; }

.RadComboBox_aaa .rcbArrowCell a
{
    position: relative;
    outline: 0;
    overflow: hidden;
    display: block;
    width: 18px;
    height: 22px;
    text-decoration: none;
    text-indent: -9999px;
    font-size: 1px;
}

div.RadComboBox_aaa td.rcbArrowCellHidden,
div.RadComboBox_aaa .rcbArrowCellHidden a
{
    width: 3px;
}

/* Read-only styles */

.RadComboBox_aaa .rcbReadOnly td.rcbArrowCell { width: 16px; }
.RadComboBox_aaa .rcbReadOnly td.rcbArrowCell a { width: 16px; }

.RadComboBox_aaa .rcbReadOnly td.rcbArrowCellLeft { background-position: -18px -88px; }
.RadComboBox_aaa .rcbReadOnly td.rcbArrowCellRight { background-position: -2px -88px; }

.RadComboBox_aaa .rcbHovered .rcbReadOnly .rcbArrowCellLeft { background-position: -54px -88px; }
.RadComboBox_aaa .rcbHovered .rcbReadOnly .rcbArrowCellRight { background-position: -38px -88px; }

.RadComboBox_aaa .rcbFocused .rcbReadOnly .rcbArrowCellLeft { background-position: -90px -88px; }
.RadComboBox_aaa .rcbFocused .rcbReadOnly .rcbArrowCellRight { background-position: -74px -88px; }

.RadComboBox_aaa .rcbReadOnly td.rcbArrowCellHidden,
.RadComboBox_aaa .rcbReadOnly td.rcbArrowCellHidden a { width: 3px; }
.RadComboBox_aaa .rcbReadOnly td.rcbArrowCellHidden { background-position: -15px -88px; }
.RadComboBox_aaa .rcbHovered .rcbReadOnly td.rcbArrowCellHidden { background-position: -51px -88px; }
.RadComboBox_aaa .rcbFocused .rcbReadOnly td.rcbArrowCellHidden { background-position: -87px -88px; }

/* dropdown */

.rcbSlide
{
    position: absolute;
    overflow: hidden;
    display: none;
    _height: 1px;
    float: left;
}

.RadComboBoxDropDown_aaa .rcbHeader,
.RadComboBoxDropDown_aaa .rcbFooter,
.RadComboBoxDropDown_aaa .rcbMoreResults a
{
    background-image: url('ComboBox/rcbSprite.png');
    background-repeat: no-repeat;
}

* html .RadComboBoxDropDown_aaa .rcbHeader,
* html .RadComboBoxDropDown_aaa .rcbFooter,
* html .RadComboBoxDropDown_aaa .rcbMoreResults a
{
    background-image: url('ComboBox/rcbSpriteIE6.png');
    background-repeat: no-repeat;
}

.RadComboBoxDropDown_aaa
{
    position: absolute;
    background: #fff;
    border: 1px solid #c6c7d2;
    border-top-color: #83868d;
    cursor: default;
    font-size: 11px;
}

.RadComboBoxDropDown_aaa_rtl
{
    text-align: rightright;
    direction: rtl;
}

.RadComboBoxDropDown_aaa .rcbScroll
{
    overflow: auto;
    position: relative;
}

.RadComboBoxDropDown_aaa .rcbList
{
    list-style: none outside;
    position: relative;
    margin: 0;
    padding: 0;
}

.RadComboBoxDropDown_aaa .rcbHeader,
.RadComboBoxDropDown_aaa .rcbFooter
{
    background-repeat: repeat-x;
    background-color: #f1f2f4;
    background-position: 0 -110px;
    padding: 5px 7px 4px;
}

.RadComboBoxDropDown_aaa .rcbHeader
{
    border-bottom: 1px solid #d5d5d5;
    margin-bottom: 1px;
}

.RadComboBoxDropDown_aaa .rcbFooter
{
    border-top: 1px solid #d5d5d5;
    margin-top: 1px;
}

.RadComboBoxDropDown_aaa .rcbNoWrap .rcbItem,
.RadComboBoxDropDown_aaa .rcbNoWrap .rcbHovered,
.RadComboBoxDropDown_aaa .rcbNoWrap .rcbDisabled,
.RadComboBoxDropDown_aaa .rcbNoWrap .rcbLoading
{
    whitewhite-space: nowrap;
}

.RadComboBoxDropDown_aaa .rcbItem,
.RadComboBoxDropDown_aaa .rcbHovered,
.RadComboBoxDropDown_aaa .rcbDisabled,
.RadComboBoxDropDown_aaa .rcbLoading
{
    padding: 2px 6px;
    margin: 0 1px;
}

html>/**/body .RadComboBoxDropDown_aaa .rcbItem,
html>/**/body .RadComboBoxDropDown_aaa .rcbHovered,
html>/**/body .RadComboBoxDropDown_aaa .rcbDisabled,
html>/**/body .RadComboBoxDropDown_aaa .rcbLoading
{
    min-height: 13px;
}

*+html .RadComboBoxDropDown_aaa .rcbItem,
*+html .RadComboBoxDropDown_aaa .rcbHovered,
*+html .RadComboBoxDropDown_aaa .rcbDisabled,
*+html .RadComboBoxDropDown_aaa .rcbLoading
{
    height: auto;
}

.RadComboBoxDropDown_aaa_rtl .rcbItem,
.RadComboBoxDropDown_aaa_rtl .rcbHovered,
.RadComboBoxDropDown_aaa_rtl .rcbDisabled,
.RadComboBoxDropDown_aaa_rtl .rcbLoading
{
    padding: 2px 6px;
}

.RadComboBoxDropDown_aaa .rcbImage
{
    vertical-align: middle;
    margin: 0 6px 2px 0;
}

.RadComboBoxDropDown_aaa_rtl .rcbImage
{
    margin: 0 0 2px 6px;
}

.RadComboBoxDropDown_aaa em
{
    font-style: normal;
    font-weight: bold;
}

.RadComboBoxDropDown_aaa .rcbItem em
{
    background: #e5e5e5;
}

.RadComboBoxDropDown_aaa .rcbHovered
{
    background: #39f;
    color: #fff;
}
*+html div.RadComboBoxDropDown_aaa .rcbList { zoom: 1; } /* IE7 item width fix */
* html div.RadComboBoxDropDown_aaa .rcbItem,
* html div.RadComboBoxDropDown_aaa .rcbHovered { zoom: 1; } /* IE6 item width fix */

.RadComboBoxDropDown_aaa .rcbSeparator
{
    color: #666;
    background: #D3ECF9;
}

.RadComboBox_aaa .rcbDisabled .rcbInputCell .rcbInput,
.RadComboBoxDropDown_aaa .rcbDisabled
{
    color: #999;
    cursor: default;
}

.RadComboBox_aaa .rcbDisabled td.rcbInputCellLeft { background-position: 0 -66px; }
.RadComboBox_aaa .rcbDisabled td.rcbInputCellRight { background-position: 100% -66px; }
.RadComboBox_aaa .rcbDisabled td.rcbArrowCellLeft { background-position: -126px -88px; }
.RadComboBox_aaa .rcbDisabled td.rcbArrowCellRight { background-position: -108px -88px; }
.RadComboBox_aaa .rcbDisabled .rcbReadOnly td.rcbArrowCellRight { background-position: -110px -88px; }
.RadComboBox_aaa .rcbDisabled .rcbReadOnly td.rcbArrowCellHidden { background-position: -15px -88px; }

.RadComboBoxDropDown_aaa .rcbLoading
{
    background: #f0f0f0;
    text-align: center;
}

.RadComboBoxDropDown_aaa .rcbMoreResults
{
    clear: both;
    border-top: 1px solid #c6c7d2;
    background: #fff;
    position: relative;
    padding: 0 6px 0;
    text-align: center;
    margin-top: 1px;
}

.RadComboBoxDropDown_aaa .rcbMoreResults a
{
    display: inline-block;
    width: 15px;
    height: 9px;
    background-position: -157px -94px;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
}

* html .RadComboBoxDropDown_aaa .rcbMoreResults a
{
    font-size: 0;
    line-height: 0;
    text-indent: 0;
}

*+html .RadComboBoxDropDown_aaa .rcbMoreResults a
{
    font-size: 0;
    line-height: 0;
    text-indent: 0;
}

.RadComboBoxDropDown_aaa .rcbMoreResults a:hover
{
    background-position: -188px -94px;
}

.RadComboBoxDropDown_aaa .rcbMoreResults span
{
    vertical-align: middle;
    height: 19px;
    line-height: 19px;
    display: inline-block;
}

.RadComboBoxDropDown_aaa .rcbSeparatedList .rcbItem,
.RadComboBoxDropDown_aaa .rcbSeparatedList .rcbHovered,
.RadComboBoxDropDown_aaa .rcbSeparatedList .rcbDisabled,
.RadComboBoxDropDown_aaa .rcbSeparatedList .rcbLoading
{
    padding-left: 12px;
}

.RadComboBoxDropDown_aaa .rcbSeparatedList .rcbSeparator
{
    padding-left: 6px;
}

/*hacks*/

/*Opera start*/
@media screen and (min-width: 550px)
{
    .RadComboBoxDropDown_aaa_rtl .rcbItem,
    .RadComboBoxDropDown_aaa_rtl .rcbHovered,
    .RadComboBoxDropDown_aaa_rtl .rcbDisabled,
    .RadComboBoxDropDown_aaa_rtl .rcbLoading
    {
        padding: 2px 6px 2px 19px;
    }
} /*Opera end*/

3-now my font is good
4-now i want 2 have a bigger Radcombo box (like zoom)on my page (whether width or height or font size)....
width property of radcombobox is relly good.so i set it to 250px...
after that i change the font size --- but radcombobox looks like a multi layer textBox like this :
see capture_2.jpg
5-after that i changed the  font size of radcombobox to it's default and every thing is ok
6-after that i go to css file and change some height size in it (randomly)
but still multi layer textbox problem exist
7-tell what can i do about that now???????????????
is there any easier solution for this job??????
thanks

[Majid Darab]

any idea ?????

[Majid Darab]

is any body home?

[Vesko]

This tutorial might be of help:

RadComboBox > Tutorial: Change the appearance of the Input element

[Majid Darab]

really thanks...
i use that tutorial to change the style of input area (Specially height and font-size) :
http://www.telerik.com/help/aspnet-ajax/appearance-change-input-look-tutorial.html
i mean (4.css)

so i did this to my radcombobox :
my css is like this :

        div.RadComboBox_Vista .rcbInputCell INPUT.rcbInput
{
   background-color: red;
   color: yellow;
   height: 37px;
}

and my radcombobox like this :

<telerik:RadComboBox ID="RadcbCompanies" runat="server" AppendDataBoundItems="True"
                                                    DataSourceID="sdsCompany" DataTextField="CoName" DataValueField="ID" EnableEmbeddedSkins="False"
                                                    LoadingMessage="درحال لود شدن ..." RadComboBoxImagePosition="Left" Skin="Vista"
                                                    Width="250px" MarkFirstMatch="True" MaxHeight="700px" Font-Size="15pt">
                                                    <Items>
                                                        <telerik:RadComboBoxItem runat="server"
                                                            Text="لطفاً یک گزینه را انتخاب نمایید ..." Value="-1" />
                                                    </Items>
                                                </telerik:RadComboBox>

so what is the problem about triangle at the rightt corner?
see capture.jpg picture

thanks for your attention
best regards

[Kamen Bundev]

Hi Majid Darab,

Unfortunately you can't directly set RadComboBox height. The tutorial there is for Q3 2008 and older releases. Styling RadComboBox requires modifying its background sprite with a image editing program and adjusting the background-positions with CSS. The only skin that can be made higher without modifying its sprite is the Simple skin (though you should modify the arrow image), check this forum post for details:
http://www.telerik.com/community/forums/aspnet-ajax/combobox/273029-combobox-height.aspx

On the bright side, there is tutorial refresh planned for the next release. Hope this helps.

Kind regards,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Positron]

I have a similar problem. I changed the font size of Radcombobox. You can see the result on attached image.

[Kate]

Hi Positron,

Please take a look at the following help article where I believe you can find very useful information related to how to customize the appearance of the RadComboBox as desired - Tutorial: Change the height of the input element. 

Kind regards,
Kate
the Telerik team