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

RadComboBox autoresize and dropdown position

16 Answers 564 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
LevizBB
Top achievements
Rank 1
LevizBB asked on 09 Jun 2011, 09:28 AM
Hello,

I have two problems with my RadComboBox :

1. The RadComboBox doesn't resize automatically when we resize the browser window.
2. When we open the RadComboBox we show the dropdown, so far all is well, but when we "scroll" on the page, the dropdown detach from the input field (as you can show in the two picture attached below).

Here is the ASP.NET code :
                                            
<telerik:RadComboBox ID="PrjComboBox" runat="server"
    AllowCustomText="true"    
    MaxLength="500"
    Width="80%"
    OnPreRender="PrjComboBox_PreRender">
    <ItemTemplate>
        <div>
            <asp:CheckBox runat="server" ID="PrjComboBoxItemCheckBox"
                Checked="false"
                onclick="onPrjComboBoxItemCheckBoxClick(this)"/>
            <asp:Label runat="server" ID="PrjComboBoxItemLabel"
                            AssociatedControlID="PrjComboBoxItemCheckBox"
                                Text='<%# DataBinder.Eval(Container, "Value") %>'>
                        </asp:Label>
                 </div>
    </ItemTemplate>                                                   
</telerik:RadComboBox>

Thanks for your help!

16 Answers, 1 is accepted

Sort by
0
Accepted
Kalina
Telerik team
answered on 13 Jun 2011, 04:54 PM
Hello LevizBB,

I am afraid that resizing the RadComboBox control upon browser window resizing is not supported.

We are aware of the second issue that you describe and I can suggest you an approach to overcome it.
Please nest the RadComboBox in a div and attach a scroll event to this container. Then at the scroll event handler you can close the RadComboBox dropdown in this manner:
<script type="text/javascript" language="javascript">
    function pageLoad() {
        $telerik.$("#container").scroll(function() {
 
            var combos = Telerik.Web.UI.RadComboBox.ComboBoxes;
 
            if (combos != null) {
                for (var i = 0; i < combos.length; i++) {
                    var combo = combos[i];
                    if (combo.get_dropDownVisible())
                        combo.hideDropDown();
                }
            }
        });
    }
</script>

Please find more details in the sample attached.

Greetings,
Kalina
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
LevizBB
Top achievements
Rank 1
answered on 21 Jun 2011, 04:37 PM
Thanks for your help.

For the RadCombobox I will set a short width, so that, it will work on mains window sizes.

0
John
Top achievements
Rank 1
answered on 24 Aug 2011, 08:01 PM
I too am having issues with scrolling and the RadComboBox.  The issue appears to be that the drop down menu moves more than the other elements on the page when you scroll.  if I move all the way to the top of the page, my drop down menu appears exactly where i want it too.  but if i scroll down any, the drop down appears higher than the original input control.  the farther down the page I scroll, the farther away the drop down window moves from its calling container.

the Solution you provided did not help move the dropdown back in place, but instead just hides the drop down when the page is scrolled.  The drop down still does not render in the approprate place. I found that this does not happen on Chrome. 
0
John
Top achievements
Rank 1
answered on 25 Aug 2011, 12:43 AM
My appologies, I overlooked a key value in my masterpage.  the page was setup to IE=8 and I am currently running IE9.  changing that fixed my problem.
0
Jimmy
Top achievements
Rank 1
answered on 29 Dec 2011, 01:53 AM
I am having the same problem with the radCombobox dropdown position when scrolling the page. Anyone have a solution for this issue, please help. I am using telerik released on May 2011.
0
Kalina
Telerik team
answered on 03 Jan 2012, 11:04 AM
Hi Jimmy,

The approach described below helps to overcome the issue.
Have you tried it?

Regards,
Kalina
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
0
Vik
Top achievements
Rank 1
answered on 03 May 2012, 05:06 PM
Any new information about this problem?

I have tried the proposed solution and it works but isn't another way to overcome it?

Using CSS or to make the DropDownList move along with the ComboBox while scrolling?
0
Kalina
Telerik team
answered on 03 May 2012, 06:53 PM
Hello Vik,

We have already tried various ways to overcome the issue and the approach that I have already suggested here is the only one that resolves it.

Regards,
Kalina
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.
0
Vik
Top achievements
Rank 1
answered on 18 May 2012, 03:51 PM
Could try blocking the page scroll at the onscroll event instead of having the dropdown list or the datepicker popup to disapear.
0
Mahmoud
Top achievements
Rank 1
answered on 13 Jun 2013, 01:16 PM
function pageLoad() {
$telerik.$("#container").scroll(function() {
var combos = Telerik.Web.UI.RadComboBox.ComboBoxes;
if (combos != null) {
for (var i = 0; i < combos.length; i++) {
var combo = combos[i];
if (combo.get_dropDownVisible())
combo.hideDropDown();
}
}
});
kindly this code very nice but i face this problem with datepicker, any one can help me to rite the same code but for date picker?
0
Eyup
Telerik team
answered on 18 Jun 2013, 01:16 PM
Hi Mahmoud,

Have you tried to enable the screen boundary detection of the picker?
 http://demos.telerik.com/aspnet-ajax/calendar/examples/datepicker/custompopup/defaultcs.aspx

Hope this helps.

Regards,
Eyup
Telerik
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 the blog feed now.
0
Subodh
Top achievements
Rank 1
answered on 10 Jul 2013, 07:32 AM
Hello Telerik Team,

             We are facing same issue in Telerik Rad Scheduler control. We are using Rad Combo box in Rad Scheduler, when we scroll page combo box get displaced.  Please provide your solutions on it. I attached Screen Shots.
0
Nencho
Telerik team
answered on 15 Jul 2013, 09:53 AM
Hello Subodh,

You could find the workaround in the posts above. You could capture the scroll event and use the hideDropDown() method, in order to hide the dropdown of the RadComboBox.

<script type="text/javascript" language="javascript">
    function pageLoad() {
        $telerik.$("#container").scroll(function() {
  
            var combos = Telerik.Web.UI.RadComboBox.ComboBoxes;
  
            if (combos != null) {
                for (var i = 0; i < combos.length; i++) {
                    var combo = combos[i];
                    if (combo.get_dropDownVisible())
                        combo.hideDropDown();
                }
            }
        });
    }
</script>


Regards,
Nencho
Telerik
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 the blog feed now.
0
Subodh
Top achievements
Rank 1
answered on 22 Jul 2013, 07:28 AM
Hello Nencho,

                          Thank you for reply, Actually I am using Rad Scheduler control to add appointment, when my popup get open, combo box from that drop down get disturbed when i open that drop down, I was try your posted code but it not working fro rad scheduler, Any another way to avoid this Issue?
0
Plamen
Telerik team
answered on 24 Jul 2013, 05:25 AM
Hi,

 In this case you should find RadComboBox and use the code that Nencho suggested in the onClientFormCreated event of RadScheduler as for example in the Clear selection for the user combobox if no room is selected section of this help topic.

Hope this will be helpful.

Regards,
Plamen
Telerik
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 the blog feed now.
0
Anatoliy
Top achievements
Rank 2
answered on 13 Jan 2015, 03:52 PM
Hi,
I am having the same problem during scrolling with Scheduler Appointment window
and drop-down list's controls (datepicker, combobox) in it.

I hope somebody help me to improve attached project with some of this ways:
 - pin drop-down list to their parent control (most expected);
 - closing opened drop-down list's on scrolling*;
 - disabling all page scrolling on opening "Insert|Update appointment" window since it closed**.

*Solution with hiding all comboboxes, mentioned in this topic, works fine, 
than what about others drop-down list's controls.







Tags
ComboBox
Asked by
LevizBB
Top achievements
Rank 1
Answers by
Kalina
Telerik team
LevizBB
Top achievements
Rank 1
John
Top achievements
Rank 1
Jimmy
Top achievements
Rank 1
Vik
Top achievements
Rank 1
Mahmoud
Top achievements
Rank 1
Eyup
Telerik team
Subodh
Top achievements
Rank 1
Nencho
Telerik team
Plamen
Telerik team
Anatoliy
Top achievements
Rank 2
Share this question
or