Combobox height

[jc mag]

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>

[Shinu]

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.

[Kalina]

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.