Dropdown list displays wrong position when scrolling the sub-page

4 posts, 1 answers
  1. Phat
    Phat avatar
    5 posts
    Member since:
    Apr 2014

    Posted 10 Apr 2014 Link to this post

    Hi,
    I'm working with AutoCompleteBox and have problem with dropdown list position.
    I build a site with 2 nested Master Pages. As you see in attachment:
    - One is marked Red, the container, fixed position.
    - One is marked Blue (main content) is nested in the Red. The content in Blue is scrollable if it is too long.
    I use AutoCompleteBox within the Blue.
    The issue is that, after the dropdown list appears (see FirstAppear.png), I scroll down the Blue area. The dropdown list is not move along with the textbox, but seems to be fixed at the screen (see AfterScrolling.png)

    View HTML source I see that the dropdown list is generated as <div>, placed as the first child of <form> element (wherever the AutoCompleteBox is)
    I found is that <div> has position: absolute, but there is not parent tag has position: relative. Therefore, the <div> relates to the top-most <html> tag - Red Area, this area is not move when we scroll the Blue area up/down.
    I think that's why we see the dropdown list not scroll up/down belong with the Blue area.

    <html>
        <body>
            ...
            <form name="aspnetForm" id="aspnetForm"... >
                 <div class="racSlide" style="left: 282.22px; top: 159.95px; ...">
                 ...
                 </div>
                 ...
            </form>
            ...
        </body>
    </html>


    Please help to have investigation.
    Thanks.
  2. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 11 Apr 2014 Link to this post

    Hello Phat,

    Actually this is not a supported scenario. The dropdown of RadAutoCompleteBox is rendered outside of your wrappers as a first element in the form. Its position is set dynamically with javascript depending on the position of the RadAutoCompleteBox.
    One possible workaround is to hide the dropdown by scrolling the wrapper.
    Is it applicable for you?

    Regards,
    Magdalena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Phat
    Phat avatar
    5 posts
    Member since:
    Apr 2014

    Posted 14 Apr 2014 Link to this post

    Magdalena,
    I think hiding the dropdown by scrolling the wrapper will make a little inconvenience. If this is a unsupported scenario, we will accept it as a limitation.
    we will keep following this. Please let me know if Telerik team has any update.

    Thank you for your support.
    Phat Nguyen

  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 14 Apr 2014 Link to this post

    Hi, Phat.

    As of now this is indeed limitation because it's really hard to workaround the issue. Of course, if we do happen to find a workaround, we'll notify you here in this thread.

    Regards,
    Ivan Zhekov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top