Position of k-list-container issue

7 posts, 0 answers
  1. Heike
    Heike avatar
    4 posts
    Member since:
    Mar 2013

    Posted 25 Apr 2013 Link to this post

    Hello,

    we have an autocomplete within a cell in a kendo grid. When triggering the autocomple list with an input, the list does not open below the input field, but at the top left of the window. I cannot clearly find out how the inline styles for the k-animation-container is calculated/generated. Is there an idea what to check??

    Heike
  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 26 Apr 2013 Link to this post

    Hello Heike,

    The position of the AutoComplete dropdown depends on the so called anchor, which is the widget's wrapper (span.k-autocomplete). The anchor is defined as such during the widget's initialization.

    If by any chance the reference to this anchor is lost, the dropdown will not be positioned correctly. The reason for this unexpected phenomenon is currently unclear and I will need a runnable example for further inspection.

    Please, let us continue the discussion at only one of the two places, either the forum thread, or the support ticket. We recommend avoiding posting the same question twice. 

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Heike
    Heike avatar
    4 posts
    Member since:
    Mar 2013

    Posted 26 Apr 2013 Link to this post

    Hi, thanks for the reply. Yes, sorry, let's us go on in the forum. 
    Your reply gives a the clue on what the problem is, thanks a lot. I'll try to find out where the anchor/wrapper might get lost and if I get stuck provide you with a runnable example.

    Regards, Heike
  5. Rolando Rosales
    Rolando Rosales avatar
    3 posts
    Member since:
    Apr 2006

    Posted 12 Jun 2013 Link to this post

    hi,
    I am having the same issue, is there a reference to a post in the forums with a workaround/solution?

    Thanks,

    Rolando
  6. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 13 Jun 2013 Link to this post

    Hi Rolando,

    So far the provided information on this issue has been insufficient. Please send a simple runnable demo, so that we can inspect it.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Robert
    Robert avatar
    3 posts
    Member since:
    Jul 2010

    Posted 28 Jun 2013 Link to this post

    The issue can be replicated by setting a zoom property on the widget element.

    I'm currently struggling with an issue where I want a set of widgets in a containing div to be smaller than the rest of those on the page.

    <div style="zoom:0.8;">
          <span style="" class="k-widget k-dropdown k-header" ...>
             <snip>
         </span>
    </div>

    This makes the widget render smaller as required, but the dropdown options are shown at the wrong position.

    As the placeholder dropdown elements are rendered to a completely separate part of the page, and not next to the widget itself, this creates a bit of a problem. Why not render the k-animation-container next to the widget itself?

  8. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 28 Jun 2013 Link to this post

    Hello Robert,

    Thank you for the additional information.

    The dropdowns are detached and rendered separately on purpose. This approach ensures that they appear on top of the other page content and are not confined by scrollable containers or ones with an overflow:hidden style.

    A simple test revealed that jQuery does not calculate correctly the position of zoomed elements, which results in the observed problem. There are some bug reports logged about this. In this case I suggest you to try some different approach instead of using a zoom style. For example, decreasing an element opacity can also be used to decrease the importance of some content on the page.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready