This is a migrated thread and some comments may be shown as answers.

Combo Box Drop Down Height

17 Answers 1276 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
sara
Top achievements
Rank 1
sara asked on 23 Apr 2008, 01:55 PM
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

17 Answers, 1 is accepted

Sort by
0
Veselin Vasilev
Telerik team
answered on 23 Apr 2008, 02:04 PM
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
0
sara
Top achievements
Rank 1
answered on 23 Apr 2008, 02:46 PM
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
0
Veselin Vasilev
Telerik team
answered on 25 Apr 2008, 03:37 PM
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
0
Henrik
Top achievements
Rank 1
answered on 05 May 2008, 08:46 AM
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..
0
Accepted
Nikolay
Telerik team
answered on 05 May 2008, 10:11 AM
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
0
Tim
Top achievements
Rank 1
answered on 08 May 2008, 05:04 PM
I'll toss my support behind this.  Ideally I want to replace the asp:ListBox control.

Thanks,
Tim

0
Kull
Top achievements
Rank 1
answered on 29 Aug 2008, 12:40 PM

<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. :)

0
A
Top achievements
Rank 1
answered on 13 Sep 2008, 04:16 AM
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
0
pohvak
Top achievements
Rank 1
answered on 13 Sep 2008, 06:18 PM
i also need that property, anybody know how?
0
Accepted
Rosi
Telerik team
answered on 15 Sep 2008, 08:22 AM
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.
0
A
Top achievements
Rank 1
answered on 16 Sep 2008, 01:51 PM
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

0
Yana
Telerik team
answered on 17 Sep 2008, 12:48 PM
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.
0
Randy
Top achievements
Rank 1
answered on 07 Jan 2009, 08:26 PM
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!
0
Bunty
Top achievements
Rank 1
answered on 04 Apr 2012, 09:20 PM
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?
0
Princy
Top achievements
Rank 2
answered on 05 Apr 2012, 12:38 PM
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.
0
Bunty
Top achievements
Rank 1
answered on 05 Apr 2012, 04:35 PM
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!
0
Sophie
Top achievements
Rank 2
answered on 23 Jan 2013, 09:18 PM
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>

Tags
ComboBox
Asked by
sara
Top achievements
Rank 1
Answers by
Veselin Vasilev
Telerik team
sara
Top achievements
Rank 1
Henrik
Top achievements
Rank 1
Nikolay
Telerik team
Tim
Top achievements
Rank 1
Kull
Top achievements
Rank 1
A
Top achievements
Rank 1
pohvak
Top achievements
Rank 1
Rosi
Telerik team
Yana
Telerik team
Randy
Top achievements
Rank 1
Bunty
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Sophie
Top achievements
Rank 2
Share this question
or