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

Dropdown box position Not displayed properly in Chrome

11 Answers 389 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
pasam Anna
Top achievements
Rank 1
pasam Anna asked on 07 Jun 2010, 10:13 AM
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.

11 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 10 Jun 2010, 07:35 AM
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.
0
Apostol Apostolov
Top achievements
Rank 1
answered on 25 Jun 2010, 12:31 PM
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 
0
WebDevIce9
Top achievements
Rank 1
answered on 22 Jul 2010, 07:20 PM
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. 
0
WebDevIce9
Top achievements
Rank 1
answered on 23 Jul 2010, 02:08 AM
*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>

0
Rich
Top achievements
Rank 2
answered on 22 Jun 2011, 01:27 PM
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.


0
Javier Perez
Top achievements
Rank 1
answered on 26 Oct 2011, 10:18 PM
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.
0
Kate
Telerik team
answered on 28 Oct 2011, 03:24 PM
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
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
jenbagaraman j
Top achievements
Rank 1
answered on 06 Jan 2012, 03:56 AM
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. 
0
Amit
Top achievements
Rank 2
answered on 12 Jul 2012, 02:02 PM

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]
0
raymond
Top achievements
Rank 1
answered on 28 Nov 2016, 02:37 PM
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.
0
Peter Milchev
Telerik team
answered on 01 Dec 2016, 09:52 AM
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
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Tags
ComboBox
Asked by
pasam Anna
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Apostol Apostolov
Top achievements
Rank 1
WebDevIce9
Top achievements
Rank 1
Rich
Top achievements
Rank 2
Javier Perez
Top achievements
Rank 1
Kate
Telerik team
jenbagaraman j
Top achievements
Rank 1
Amit
Top achievements
Rank 2
raymond
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or