Combobox height

3 posts, 0 answers
  1. jc mag
    jc mag avatar
    106 posts
    Member since:
    Aug 2005

    Posted 13 Jan 2010 Link to this post

    I want to increase the height of a combobox but it doesn't work, see the screenshot attached.

    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" 
        CodeFile="HomeTest.aspx.cs" Inherits="HomeTest" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <asp:Content ID="Content1" ContentPlaceHolderID="CphMaster" runat="Server">  
        <script type="text/javascript">  
            function RequestingHandler(sender, eventArgs) {  
                if (eventArgs.get_text().length < 3)  
            function ClientKeyPressing(sender, eventArgs) {  
                if (eventArgs.get_domEvent().keyCode == 13) { // enter key  
                    document.getElementById("<%= btnGo.UniqueID %>").click();  
            function ClientSelectedIndexChanged(sender, eventArgs) {  
                var item = eventArgs.get_item();  
        <style type="text/css">  
            div.CustomCssClass .rcbInputCell INPUT.rcbInput  
                height: 80px;  
        <telerik:RadComboBox ID="cboSearch" runat="server" Skin="WebBlue" AllowCustomText="True" 
            MarkFirstMatch="false" EnableLoadOnDemand="True" OnClientSelectedIndexChanged="ClientSelectedIndexChanged" 
            CssClass="CustomCssClass" OnItemsRequested="ItemsRequested" OnClientKeyPressing="ClientKeyPressing" 
            LoadingMessage="Loading of suggested articles..." ItemRequestTimeout="200" OnClientItemsRequesting="RequestingHandler" 
            AutoCompleteSeparator=";," SkinsPath="~/RadControls/ComboBox/Skins" Width="350px" 
            ShowToggleImage="false" Height="120px" > 
        <asp:Button ID="btnGo" runat="server" Text="Go" OnClick="btnGo_Click" ToolTip="Click here to start the search" /> 

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Jan 2010 Link to this post


    Here is the forum link which discussed same scenario.
    How to set the height of the textbox of the RadComboBox

    Also go through the following documentation which shows how to set height of the input part of combobox.
    Controlling Appearance

    Hope this helps,
  3. DevCraft R3 2016 release webinar banner
  4. Kalina
    Kalina avatar
    918 posts

    Posted 18 Jan 2010 Link to this post

    Hi jc mag,

    Shinu is right, check these articles, but overall to change the height of the RadComboBox you will need to adjust the sprite that it uses with an image editing software of your choice. The only exception to that is the Simple skin, which you can resize with the following rules and the attached image:

    div.RadComboBox_Simple .rcbInput
        line-height: 120px;
    div.RadComboBox_Simple table tr td.rcbInputCell
        height: 118px;
        line-height: 118px;
    div.RadComboBox_Simple td.rcbArrowCell a
        height: 117px;
    div.RadComboBox_Simple table tr td.rcbArrowCell
        background-image: url('images/rcbSimpleSprite.png');
        background-repeat: no-repeat;
        background-position: 0 50%;
    div.RadComboBox_Simple td.rcbArrowCell { background-position: 0 50%; }
    div.RadComboBox_Simple .rcbHovered .rcbArrowCell { background-position: -20px 50%; }
    div.RadComboBox_Simple .rcbFocused .rcbArrowCell { background-position: -40px 50%; }
    div.RadComboBox_Simple .rcbDisabled .rcbArrowCell { background-position: -60px 50%; }

    Kind regards,
    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.
Back to Top