Drop down list not aligned

4 posts, 1 answers
  1. Fahad
    Fahad avatar
    8 posts
    Member since:
    Mar 2012

    Posted 24 Apr 2012 Link to this post


    Hi,
    My issue is simple, I have a normal HTML Dropdown List or <select> list. I am using the following code to convert it to Kendo Drop Down

    $(document).ready(function () {
                $(".mySelect").kendoDropDownList();

     }

    It works, but the alignment is not good. When I open the dropdown list to choose the Items, the list is a little bit moved to the right of the base-button. 

    Here is the screenshot

    Click Here For Screenshot
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 26 Apr 2012 Link to this post

    Hello Fahad,

    I believe the problem is caused by the styling, but the screenshot is not enough to detect and resolve the problem. Could you please provide a simple test project, which reproduces the depicted issue? This way I will be able to observe the problem and advice you further.

     Regards,

    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Fahad
    Fahad avatar
    8 posts
    Member since:
    Mar 2012

    Posted 26 Apr 2012 Link to this post

    Here is the sample.

    https://sites.google.com/site/fahadash/home/files/DDL_Anomally.zip?attredirects=0&d=1

    I also found that <body style="text-align:center;"> is doing it but; I cannot reproduce it by staring a fresh page and putting this style element in body. So its possibly the combination of this style and something else.... I scrubbed the data and gave you the actual page.


    So, taking out style="text-align:center;" fixes the problem. but we do need to keep that.

  4. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 27 Apr 2012 Link to this post

    Hello Fahad,

    Thank you for sending us your sample. I believe the following styling will help to resolve the problem:
    body > .k-animation-container
    {
      text-align: left;
    }

    Please check it and let me know if I missed something.

    Greetings,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top