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

10 posts, 0 answers
  1. Majid Darab
    Majid Darab avatar
    112 posts
    Member since:
    Dec 2009

    Posted 13 Jan 2010 Link to this post

    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

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

    Posted 14 Jan 2010 Link to this post

    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.
  5. Majid Darab
    Majid Darab avatar
    112 posts
    Member since:
    Dec 2009

    Posted 14 Jan 2010 Link to this post

    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


  7. Majid Darab
    Majid Darab avatar
    112 posts
    Member since:
    Dec 2009

    Posted 15 Jan 2010 Link to this post

    any idea ?????

  8.
  9. Majid Darab
    Majid Darab avatar
    112 posts
    Member since:
    Dec 2009

    Posted 16 Jan 2010 Link to this post

    is any body home?
  11. Vesko
    Vesko avatar
    122 posts
    Member since:
    Mar 2009

    Posted 18 Jan 2010 Link to this post

    This tutorial might be of help:

    RadComboBox > Tutorial: Change the appearance of the Input element
  13. Majid Darab
    Majid Darab avatar
    112 posts
    Member since:
    Dec 2009

    Posted 18 Jan 2010 Link to this post

    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
  15. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 19 Jan 2010 Link to this post

    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.
  17. Positron
    Positron avatar
    1 posts
    Member since:
    Jan 2012

    Posted 01 Feb 2013 Link to this post

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


  19. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 06 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top