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

Screen boundary detection not working

3 Answers 166 Views

ComboBox

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

Andrew asked on 12 Feb 2013, 08:03 PM

ComboError.PNG

When a radComboBox has many items (over 100) the Screen boundary detection is not working properly when the screen is scrolled far. The combobox will always open upwards despite being at the top of the screen. Also the list will open past the top of the screen forcing the user to scroll up to see the list.

Is there any resolution to this issue?

ASPX

<div style="margin:1000px 0;">

<telerik:RadComboBox runat="server" ID="combo1">

</telerik:RadComboBox>

</div>

C# Page_Load

for (int i = 0; i < 100; i++)

{

combo1.Items.Add(new RadComboBoxItem("Text" + i, i.ToString()));

}

Thanks

3 Answers, 1 is accepted

answered on 12 Feb 2013, 09:43 PM

Hi Andrew,

Since you're setting the margin to be 1000px, the RadComboBox is appearing towards the bottom of the page. To quote the RadComboBox documentation, "The drop-down list automatically expands to the opposite direction when the screen boundaries would otherwise be crossed". This is why the box is opening to the top as opposed to 'dropping down'. In regards to solving your issue, I would recommend setting the margin to a smaller number so the RadComboBox will 'drop down' as opposed to 'jumping up'. To keep the list from opening past the top or bottom of the page, all you need to do is set the MaxHeight property to a reasonable size, maybe 150 - 200px:

<div style="margin:500px 0;">

<telerik:RadComboBox runat="server" ID="combo1" MaxHeight="150px">

</telerik:RadComboBox>

</div>

Hopefully I could be of some help to you! Good luck,
Master Chief

answered on 12 Feb 2013, 10:14 PM

I set the margins that way to simulate content, as my combos are farther down the page. I am aware that they work fine when no scrolling is involved. This bug only happens when the page is scrolled.
In this scenario, scroll the page so the combo is near the top of the page and expand. It will open upwards and cut off the options as shown in my screen shot

Setting the combo height fixes this bug, but that seems a bit restrictive. Is it not possible to have an elastic height for combo dropdowns? My project combos have many items, and restricting to a specific height would force unnecessary scrolling.