Dropdown box position Not displayed properly in Chrome

[pasam Anna]

Hi

    In IE dropdown box displaying properly.

But In Chrome Dropdown Box displaying position is differentIn page if I have scrollbar this problem occur..without scrollbar its fine)

Please see the image for ref.

[T. Tsonev]

Hello,

We'd like to help, but we're going to need either a live URL or the source of the page in order to debug the issue. Thank you in advance.

Regards,
Tsvetomir Tsonev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Apostol Apostolov]

Hey Telerik,

Do you have any advance on the issue? I am experiencing the same problems with RadComboBox and Chrome - with other browsers everything looks fine.

Regards,

Apostol Apostolov 

[WebDevIce9]

I'm having the same issue on all browsers. The dropdown is off to the right. Something with CSS, but I cannot figure it out. I wonder what code you expect us to post? The style is preconfigured in the controls. 

[WebDevIce9]

*Solution*

The Rad combobox uses javascript to calculate the position of a div with the id of rcbSlide. So, it makes this calc based on the outmost div it is contained in. If that outermost div on your page or master page is position=absolute and there other style adjusting left/right etc... it will jack up the calculation and position the dropdown OFF by whatever is in your left/right css style setting.  Below you will see the css I commented out on the master pages outer most div. You will also see my new code (uncommented). It now takes the default position (which is relative) and adjusts the margins dynamically for a more liquid window WITHOUT the radcombobox dropdown going off into la la land. SHORT ANSWER: get rid of position: absolute in your outer most div's css. Then try to duplicate your window's liquid style differently.

/* outermost div */

#wrapper

{ 

width: 978px;

/*

position: absolute;

top: 40px; 

left: 50%;

width: 978px;

margin-left:-480px;

margin-top: 0px;

*/

margin-left:auto;

margin-right:auto;

background-color: #f8f4f1;

border: solid 2px #371a00;

}

On a side note you can overwrite any style for the drop down list with this type of functionality in your page or css. Not sure why you would want to, but hey it's a tool you may need. 

<style type ="text/css">

.rcbSlide 

{

position:aboslute !important;

left:50px !important;

}

.rcbList

{

}

</style>

[Rich]

Problem:

I got into a similar situation where there was an offset to the right of the combobox dropdown list.  If you resized the window smaller, the offset would shrink until it finally lined up.  Thus wider browser windows had a bigger problem.

Cause:

A style had been applied to the Body tag to auto-center the content in the browser with a content width of 1024px.  Anything wider would cause an offset.

Solution:

Move the style out of the Body tag into a new DIV block with position:relative.

[Javier Perez]

I am having the same issue with chrome. Using Telerik version 2009.3.1314.35. I have tried all the solutions here and nothing fixes the issue. In my case the top is just not calculated correctly. Is this fixed in the latest version of Telerik? I am thinking about just replacing Telerik with jQuery completely.

[Kate]

Hi Javier,

I tested the issue with the both the lates version of our controls as well as the 2009.3.1314.35 version but I am not able to get the appearance that you do (see the attached image). Do you use any custom styles for the layout of your page since this could a reason why you get this appearance? If you could send us a live url where we can inspect the issue locally it would be very useful as well.

Greetings,
Kate
the Telerik team

[jenbagaraman j]

Hi,
      I am also having the same problem. In the master page, i have 3 sections( header,body, footer).  I give fixed height for header and footer sections and the position is absolute. In the body section also have the absolute position, because i want scrolling only on the body. I have a combobox list in the body, but it not displaying properly when scroll the body. i am using telerik MVC.  Please help me to resolve the issue. 

[Amit]

Try this JQuery snippet to hide the opened items of combobox when scrolling the window:

$(document).ready(function () {

    $(window).scroll(function () {

        var comboBox = $find("RadComboBox1");

        if (comboBox.DropDownVisible)

            comboBox.hideDropDown();

    });

});

This is not working in the sharepoint webpart Just tried in sample application :(
here is discussion for the same - 
http://www.telerik.com/community/forums/sharepoint-2010/integrate-ajax-controls/combo-box-s-opened-drop-down-list-is-sticking-when-scrolling-the-page.aspx [Solved]

[raymond]

I encountered this problem as well. With the drop down being detached from the main control. For me the problem was using the incorrect version of jQuery with Kendo UI. I updated my site to use the version of jQuery that is distributed with Kendo (in the /js directory) and it started working a normal.

[Peter Milchev]

Hello Raymond,

Thank you for sharing the solution to your problem. 

Indeed some problems could arise if Kendo UI widgets are used with a jQuery version that is not listed as compatible in the JavaScript Prerequisites article. 

Also, I would like to clarify that this forum thread is related to the RadComboBox for ASP.NET AJAX and not any of the Kendo UI suites.

Regards,
Peter Milchev
Telerik by Progress