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)  
                    eventArgs.set_cancel(true)  
                else  
                    eventArgs.set_cancel(false);  
     
            }  
     
            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();  
                sender.set_text(item.get_text());  
            }  
     
     
        </script> 
     
        <style type="text/css">  
            div.CustomCssClass .rcbInputCell INPUT.rcbInput  
            {  
                height: 80px;  
            }  
        </style> 
          
        <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" > 
        </telerik:RadComboBox> 
        &nbsp;  
        <asp:Button ID="btnGo" runat="server" Text="Go" OnClick="btnGo_Click" ToolTip="Click here to start the search" /> 
    </asp:Content> 
     

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

    Posted 14 Jan 2010 Link to this post

    Hello,

    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,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kalina
    Admin
    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,
    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,
    Kalina
    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