Combo Box Drop Down Height

18 posts, 2 answers
  1. sara
    sara avatar
    31 posts
    Member since:
    May 2007

    Posted 23 Apr 2008 Link to this post

    Currently, if I populate a combo box with X items, the height of the drop down fits the number of items.  If I provide a list of 1000 items, the drop down makes itself big enough to show all 1000 items.  The only way I have found to limit this is by setting the Height property of the combo box.  However, when I do this I specify something like 300px, but then if I only have 2 items in the list, then I get a big whitespace beneath those 2 items.  Is there something like a "MaxHeight" property that can be set, or a way to make the combo box resize to a certain height?

    Thanks
    Sara
  2. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 23 Apr 2008 Link to this post

    Hello sara,

    I suggest checking this KB article:

    (ID#956) Set the Height of RadComboBox based on number of items

    I hope this helps.

    Kind regards,
    Veskoni
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. sara
    sara avatar
    31 posts
    Member since:
    May 2007

    Posted 23 Apr 2008 Link to this post

    Thanks for your reply.  This seems like it would be something so common that there would be a MaxHeight property of the combo box.

    I tried using the code in the article you recommended, but that only works for initial page load, if you have multi-combo box filtering, the # of items will change, but the height stays the same.  Should this be working on callbacks, or will I need to also add code to adjust the size in javascript?

    Thanks,
    Sara
  5. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 25 Apr 2008 Link to this post

    Hi sara,

    Consider this code:

            <telerik:RadComboBox ID="RadComboBox1" runat="server"  
                OnClientItemsRequested="OnClientItemsRequestedHandler" 
                OnClientDropDownOpening="OnClientItemsRequestedHandler" 
                EnableLoadOnDemand="true"             
                OnItemsRequested="RadComboBox1_ItemsRequested"
                <ExpandAnimation Type="none" /> 
                <CollapseAnimation Type="none" /> 
            </telerik:RadComboBox> 
            <script type="text/javascript"
            function OnClientItemsRequestedHandler(sender, eventArgs) 
            { 
                //set the max allowed height of the combo  
                var MAX_ALLOWED_HEIGHT = 220
                //this is the single item's height  
                var SINGLE_ITEM_HEIGHT = 22
     
                var calculatedHeight = sender.get_items().get_count() * SINGLE_ITEM_HEIGHT; 
     
                var dropDownDiv = sender.get_dropDownElement(); 
                 
                if (calculatedHeight > MAX_ALLOWED_HEIGHT)  
                {  
                    setTimeout ( 
                        function () { 
                            dropDownDiv.firstChild.style.height = MAX_ALLOWED_HEIGHT + "px";  
                        }, 100 
                    );                 
                }  
                else  
                {  
                    setTimeout ( 
                        function () { 
                            dropDownDiv.firstChild.style.height = calculatedHeight + "px";  
                        }, 100 
                    ); 
                } 
            } 
            </script> 


    Sincerely yours,
    Veskoni
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Henrik
    Henrik avatar
    3 posts
    Member since:
    Feb 2008

    Posted 05 May 2008 Link to this post

    Hi

    I have to agree with sara. Infact I have had to remove all the Telerik combo boxes from my apps as they are 'uncontrollable' in the way Height (and Width) is set. This was a disappointing move since I just downloaded the first production release of .AJAX and had some good hopes. However the design time settings makes the controls unusable for me.

    Im sorry to say but from first look your controls are very very good looking but vastly over-designed (defaulting to use animated drop down and having something like 10 different animation settings - that is design b4 functionality). Not being able to fully control hight and width of a control arguably the most basic setting just left me stone cold about Telriks new realese.

    Kind regards
    Henrik

    ... and proposing some clever scripting to get the simplest of hight setting adjusted makes me even more dissapointed...im sorry..
  7. Answer
    Nikolay
    Admin
    Nikolay avatar
    3997 posts

    Posted 05 May 2008 Link to this post

    Hi Henrik,

    We will try to include the RadComboBox' "MaxHeight" property in the next release of the Telerik.Web.UI bundle due by the end of July.

    I hope this timeframe is acceptable for you.

    Regards,
    Nick
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Tim
    Tim avatar
    169 posts
    Member since:
    Apr 2008

    Posted 08 May 2008 Link to this post

    I'll toss my support behind this.  Ideally I want to replace the asp:ListBox control.

    Thanks,
    Tim

  9. Kull
    Kull avatar
    1 posts
    Member since:
    Aug 2008

    Posted 29 Aug 2008 Link to this post

    <telerik:RadComboBox ID="cbxDivision" runat="server" ShowToggleImage="True" DropDownWidth="300" Width="250">
        <ItemTemplate>
            <div id="divDivision">
                <telerik:RadTreeView runat="server" ID="tvwDivision" OnClientNodeClicking="nodeClickingDivision" OnNodeExpand="Tree_NodeExpand">
                </telerik:RadTreeView>
            </div>
        </ItemTemplate>
        <Items>
            <telerik:RadComboBoxItem Text="" Height="400" />
        </Items>
    </telerik:RadComboBox>
    <script type="text/javascript">
        var div1 = document.getElementById("divDivision");
        div1.onclick = StopPropagation;
    </script>

    I took code from example and set Item height, and control inside item can have floating size - dropdown automatically shows scroll bars. One item - one height. :)

  10. A
    A avatar
    20 posts
    Member since:
    Mar 2008

    Posted 12 Sep 2008 Link to this post

    Hi,
    After upgrading from a Q1 release to the Q2 2008.2.905.35 (hotfix) release and my existing CSS based hack to force vertical scrolling in the combobox no longer works.

    I need a solution where I set some MaxHeight property. What is the status of this enhancement request?

    Thanks, Andy
  11. pohvak
    pohvak avatar
    5 posts
    Member since:
    Sep 2008

    Posted 13 Sep 2008 Link to this post

    i also need that property, anybody know how?
  12. Answer
    Rosi
    Admin
    Rosi avatar
    2527 posts

    Posted 15 Sep 2008 Link to this post

    Hello ,

    We already implemented this property and it will be included in our next official Q3 release.

    Meanwhile you can use our KB article - Set the Height of RadComboBox based on number of items.


    Kind regards,
    Rosi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  13. A
    A avatar
    20 posts
    Member since:
    Mar 2008

    Posted 16 Sep 2008 Link to this post

    Hi,
     I have multiple RadComboBoxes inside a single RadAjax panel and I am programmatically setting the Height property in code-behind to match the number of rows being returned up to a set maximum size.

    My problem is that ALL the comboboxes dropdowns have the same height even though they were assigned different values for their height property. It looks like their as sharing the height property of set in one of the controls.

    I am using (hotfix) release 2008.2.905.35 of your RadControls for Ajax.Vista +IIS and IE7.

    Thanks, Andy

  14. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 17 Sep 2008 Link to this post

    Hi Andy,

    I tried to reproduce the described problem but with no success. Could you please open a support ticket and send us a sample project illustrating this issue so we can test it locally? Thanks

    Kind regards,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  15. Randy
    Randy avatar
    23 posts
    Member since:
    Jul 2012

    Posted 07 Jan 2009 Link to this post

    Thank you for including the MaxHeight property in your Q3 release.  All i did was upgrade my Q2 with Q3 and add the property in my code and it works great.  Thank you Telerik!
  16. Bunty
    Bunty avatar
    2 posts
    Member since:
    Apr 2012

    Posted 04 Apr 2012 Link to this post

    My ComboBox is in a radwindow of height 200px. I have set the height of combobox to 90px and yet I get a scrollbar even if I have only one item in the dropdown for combobox.

    Any clue how I can get rid of the scrollbar?
  17. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Apr 2012 Link to this post

    Hello Bunty,

    I have tried to reproduce the same with telerik controls version 2012, 1, 327, 35 but no avail. Here is the sample code and screenshot.
    ASPX:
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
       <Windows>
          <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" Height="200px">
            <ContentTemplate>
              <telerik:RadComboBox ID="RadComboBox1" runat="server" Height="90px">
                 <Items>
                   <telerik:RadComboBoxItem Text="item1" />
                  </Items>
              </telerik:RadComboBox>
           </ContentTemplate>
          </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>

    Please paste your code if it doesn't help

    Thanks,
    Princy.
  18. Bunty
    Bunty avatar
    2 posts
    Member since:
    Apr 2012

    Posted 05 Apr 2012 Link to this post

    Hi Princy,
    Thanks for your effort. You are correct indeed.
    The problem I was facing was because of a custom style we had added for combobox

    Thanks again!
  19. Sophie
    Sophie avatar
    33 posts
    Member since:
    Aug 2012

    Posted 23 Jan 2013 Link to this post

    I know this is an old post, but i got this issue. (using 2012.1.215.35 ASP.NET Ajax)
    My drop down list has to be 120px max, so i have the property MaxHeight at 120px. I populate my list with some DB data, works well. My dropDown list has 120px. What's happening to me is this: regardless of how many row i have in my dropDownlist, i have a div of 120px at the bottom of the data (seen by firebug), and this div appears when i have the property MaxHeight. Otherwise i don't have it but the list is way to long.
    But this looks localised in IE. In firefox and chrome, the scrollbar seems longer but the data doesn't scroll. But this leaves with the impression that the user can't reach some data.
    i saw some post about calculating the height of the list.. but whenever i add the Height or MaxHeight property, i get white space at the end on my list.
    Is this a known issue? Or am i missing some css properties?

    This is my RadComboBox:
    <telerik:RadComboBox ID="Combo" AllowCustomText="true" runat="server"
      EnableLoadOnDemand="true"
      EnableAutomaticLoadOnDemand="true"
      EnableVirtualScrolling="true"
      EnableItemCaching="true"
      ShowDropDownOnTextboxClick="true"
      ShowMoreResultsBox="false"
      ItemsPerRequest="10"
      Filter="None"
      DataTextField="Text" DataValueField="Value"
      DropDownCssClass="mycssclass"
      DropDownWidth="280px" EnableScreenBoundaryDetection="False"
      MaxHeight="120px" Height="120px" OffsetY="5" OffsetX="5" Width="19px" >
        <ExpandAnimation Type="none" />
        <CollapseAnimation Type="none" />
    </telerik:RadComboBox>

    and this is my css attached to it:
    .mycssclass{
      white-space:nowrap;
    }

    (i tried a lot of properties combo but no good).

    Edit: see the picture attached. In the properties of the RadComboBox there's height AND maxHeight. That was my last try combining them. I tried MaxHeight alone, Height alone, and none. Only none worked but i get a VERY long drop down list.

    This is what Firebug gives me:
    <div class="rcbScroll rcbWidth" style="height: 120px; width:100%;" >
      <ul class="rcbList">
        <li class="rcbItem">item1</li>
        <li class="rcbItem">item2</li>
        <li class="rcbItem">item3</li>
        <li class="rcbItem">item4</li>
        <li class="rcbItem">item5</li>
        <li class="rcbItem">item6</li>
        <div style="height: 120px;"></div> <!-- what is that??? -->
      </ul>
    </div>

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017