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. 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.
  3. 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 --> font12px TahomaArialsans-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 
        font12px TahomaArialsans-serif
        color#333
        text-alignleft
     
    .RadComboBox_aaa_rtl, 
    .RadComboBox_aaa_rtl .rcbInput, 
    .RadComboBoxDropDown_aaa_rtl 
        text-alignrightright
     
    /* combobox */ 
     
    .RadComboBox_aaa 
        vertical-alignmiddle
     
    * html .RadComboBox_aaa { vertical-aligntop; } 
     
    .RadComboBox_aaa table 
        border: 0; 
        border-collapsecollapse
     
    .RadComboBox_aaa table td.rcbInputCell 
        width: 100%; 
        height20px
        line-height20px
        vertical-alignmiddle
        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 
        backgroundurl('ComboBox/rcbSprite.png'no-repeat
     
    * html .RadComboBox_aaa .rcbInputCellLeft, 
    * html .RadComboBox_aaa .rcbInputCellRight, 
    * html .RadComboBox_aaa .rcbArrowCellLeft, 
    * html .RadComboBox_aaa .rcbArrowCellRight 
        backgroundurl('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%; 
        backgroundtransparent
        border: 0; 
        vertical-alignmiddle
        padding2px 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-styleitalic
     
    .RadComboBox_aaa .rcbReadOnly .rcbInput 
        cursordefault
     
    .RadComboBox_aaa table td.rcbInputCell, 
    .RadComboBox_aaa .rcbInputCell .rcbInput 
        padding-left2px
     
    .RadComboBox_aaa_rtl table td.rcbInputCell, 
    .RadComboBox_aaa_rtl .rcbInputCell .rcbInput 
        padding-right2px
        padding-left: 0; 
     
    .RadComboBox_aaa .rcbHovered .rcbInputCell .rcbInput 
        color#045cb5
     
    .RadComboBox_aaa table td.rcbArrowCell 
        width18px
        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 
        positionrelative
        outline: 0; 
        overflowhidden
        displayblock
        width18px
        height22px
        text-decorationnone
        text-indent: -9999px
        font-size1px
     
    div.RadComboBox_aaa td.rcbArrowCellHidden, 
    div.RadComboBox_aaa .rcbArrowCellHidden a 
        width3px
     
    /* Read-only styles */ 
     
    .RadComboBox_aaa .rcbReadOnly td.rcbArrowCell { width16px; } 
    .RadComboBox_aaa .rcbReadOnly td.rcbArrowCell a { width16px; } 
     
    .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 { width3px; }  
    .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 
        positionabsolute
        overflowhidden
        displaynone
        _height: 1px
        floatleft
     
    .RadComboBoxDropDown_aaa .rcbHeader, 
    .RadComboBoxDropDown_aaa .rcbFooter, 
    .RadComboBoxDropDown_aaa .rcbMoreResults a 
        background-imageurl('ComboBox/rcbSprite.png'); 
        background-repeatno-repeat
     
    * html .RadComboBoxDropDown_aaa .rcbHeader, 
    * html .RadComboBoxDropDown_aaa .rcbFooter, 
    * html .RadComboBoxDropDown_aaa .rcbMoreResults a 
        background-imageurl('ComboBox/rcbSpriteIE6.png'); 
        background-repeatno-repeat
     
    .RadComboBoxDropDown_aaa 
        positionabsolute
        background#fff
        border1px solid #c6c7d2
        border-top-color#83868d
        cursordefault
        font-size11px
     
    .RadComboBoxDropDown_aaa_rtl 
        text-alignrightright
        directionrtl
     
    .RadComboBoxDropDown_aaa .rcbScroll 
        overflowauto
        positionrelative
     
    .RadComboBoxDropDown_aaa .rcbList 
        list-stylenone outside
        positionrelative
        margin: 0; 
        padding: 0; 
     
    .RadComboBoxDropDown_aaa .rcbHeader, 
    .RadComboBoxDropDown_aaa .rcbFooter 
        background-repeatrepeat-x; 
        background-color#f1f2f4
        background-position: 0 -110px
        padding5px 7px 4px
     
    .RadComboBoxDropDown_aaa .rcbHeader 
        border-bottom1px solid #d5d5d5
        margin-bottom1px
     
    .RadComboBoxDropDown_aaa .rcbFooter 
        border-top1px solid #d5d5d5
        margin-top1px
     
    .RadComboBoxDropDown_aaa .rcbNoWrap .rcbItem, 
    .RadComboBoxDropDown_aaa .rcbNoWrap .rcbHovered, 
    .RadComboBoxDropDown_aaa .rcbNoWrap .rcbDisabled, 
    .RadComboBoxDropDown_aaa .rcbNoWrap .rcbLoading 
        whitewhite-spacenowrap
     
    .RadComboBoxDropDown_aaa .rcbItem, 
    .RadComboBoxDropDown_aaa .rcbHovered, 
    .RadComboBoxDropDown_aaa .rcbDisabled, 
    .RadComboBoxDropDown_aaa .rcbLoading 
        padding2px 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-height13px
     
    *+html .RadComboBoxDropDown_aaa .rcbItem, 
    *+html .RadComboBoxDropDown_aaa .rcbHovered, 
    *+html .RadComboBoxDropDown_aaa .rcbDisabled, 
    *+html .RadComboBoxDropDown_aaa .rcbLoading 
        heightauto
     
    .RadComboBoxDropDown_aaa_rtl .rcbItem, 
    .RadComboBoxDropDown_aaa_rtl .rcbHovered, 
    .RadComboBoxDropDown_aaa_rtl .rcbDisabled, 
    .RadComboBoxDropDown_aaa_rtl .rcbLoading 
        padding2px 6px
     
    .RadComboBoxDropDown_aaa .rcbImage 
        vertical-alignmiddle
        margin: 0 6px 2px 0; 
     
    .RadComboBoxDropDown_aaa_rtl .rcbImage 
        margin: 0 0 2px 6px
     
    .RadComboBoxDropDown_aaa em 
        font-stylenormal
        font-weightbold
     
    .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
        cursordefault
     
    .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-aligncenter
     
    .RadComboBoxDropDown_aaa .rcbMoreResults 
        clearboth
        border-top1px solid #c6c7d2
        background#fff
        positionrelative
        padding: 0 6px 0; 
        text-aligncenter
        margin-top1px
     
    .RadComboBoxDropDown_aaa .rcbMoreResults a 
        displayinline-block
        width15px
        height9px
        background-position: -157px -94px
        text-indent: -9999px
        overflowhidden
        text-decorationnone
        cursorpointer
        vertical-alignmiddle
     
    * 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-alignmiddle
        height19px
        line-height19px
        displayinline-block
     
    .RadComboBoxDropDown_aaa .rcbSeparatedList .rcbItem, 
    .RadComboBoxDropDown_aaa .rcbSeparatedList .rcbHovered, 
    .RadComboBoxDropDown_aaa .rcbSeparatedList .rcbDisabled, 
    .RadComboBoxDropDown_aaa .rcbSeparatedList .rcbLoading 
        padding-left12px
     
    .RadComboBoxDropDown_aaa .rcbSeparatedList .rcbSeparator 
        padding-left6px
     
    /*hacks*/ 
     
    /*Opera start*/ 
    @media screen and (min-width550px
        .RadComboBoxDropDown_aaa_rtl .rcbItem, 
        .RadComboBoxDropDown_aaa_rtl .rcbHovered, 
        .RadComboBoxDropDown_aaa_rtl .rcbDisabled, 
        .RadComboBoxDropDown_aaa_rtl .rcbLoading 
        { 
            padding2px 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


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

    Posted 15 Jan 2010 Link to this post

    any idea ?????

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

    Posted 16 Jan 2010 Link to this post

    is any body home?
  6. Vesko
    Vesko avatar
    122 posts
    Member since:
    Mar 2009
  7. 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-colorred;    
       coloryellow
       height37px

    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
  8. 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.
  9. 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.


  10. 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