Dropdown box position Not displayed properly in Chrome

12 posts, 0 answers
  1. pasam Anna
    pasam Anna avatar
    19 posts
    Member since:
    Oct 2009

    Posted 07 Jun 2010 Link to this post

    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.
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 10 Jun 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Apostol Apostolov
    Apostol Apostolov avatar
    16 posts
    Member since:
    Sep 2009

    Posted 25 Jun 2010 Link to this post

    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 
  5. WebDevIce9
    WebDevIce9 avatar
    24 posts
    Member since:
    Sep 2012

    Posted 22 Jul 2010 Link to this post

    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. 
  6. WebDevIce9
    WebDevIce9 avatar
    24 posts
    Member since:
    Sep 2012

    Posted 22 Jul 2010 Link to this post

    *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>

  7. Rich
    Rich avatar
    6 posts
    Member since:
    Feb 2010

    Posted 22 Jun 2011 Link to this post

    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.


  8. Javier Perez
    Javier Perez avatar
    2 posts
    Member since:
    Oct 2009

    Posted 26 Oct 2011 Link to this post

    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.
  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 28 Oct 2011 Link to this post

    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
  10. jenbagaraman j
    jenbagaraman j avatar
    5 posts
    Member since:
    Oct 2009

    Posted 05 Jan 2012 Link to this post

    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. 
  11. Amit
    Amit avatar
    8 posts
    Member since:
    Jul 2012

    Posted 12 Jul 2012 Link to this post

    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]
  12. Raymond
    Raymond avatar
    1 posts
    Member since:
    Nov 2015

    Posted 28 Nov Link to this post

    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.
  13. Peter Milchev
    Admin
    Peter Milchev avatar
    135 posts

    Posted 3 days and 9 hours ago Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017