@progress/kendo-react-dropdowns renders options horizontally

4 posts, 0 answers
  1. Abhay
    Abhay avatar
    5 posts
    Member since:
    Apr 2019

    Posted 13 Jan 2020 Link to this post

    Has anyone come across this problem where the dropdown options of a dropdown list control renders horizontally opposed to the expected vertical render.

    dropdownlist

        --> option1 | option2 | option3

    instead of,

    dropdownlist

        --> option1

        --> option2

        --> option3

     

    I am using kendo react UI with typescript.

    This is how I have used the control to start with.
    <DropDownList data={["Austria", "Belarus", "Austria1", "Belarus1"]} />

    Any help would be much appreciated.

     

  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 14 Jan 2020 Link to this post

    Hello, Abhay,

    Currently, the DropDownList can only show items vertically.

    If you would like to have an option to show them horizontally, please let me know and I will convert this to an official feature request.

    Additionally, I come up with an item of how something similar can be achieved with the Popup component and ButtonGroup. The functionality is different, but it can prove helpful:

    https://stackblitz.com/edit/react-p9exg4?file=app/main.jsx

    Regards,
    Stefan
    Progress Telerik

    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 Feedback Portal and vote to affect the priority of the items
  3. Abhay
    Abhay avatar
    5 posts
    Member since:
    Apr 2019

    Posted 14 Jan 2020 in reply to Stefan Link to this post

    Hey Stefan,

    Thank you for your response. But, it looks like you've misunderstood my problem statement, where I was trying to get help on getting rid of the horizontal scroll behavior. I would like to fix this behavior, rather and get the vertical behavior working. 

    Surprize: And, if Kendo does not support horizontal scroll right now, then I guess it does now, as the drop down list renders options on a single row with a horizontal scroll bar on my application.

    I have attached a short clip of the behavior of the control and the source walk through and can be found in the link below.

    https://concurrencyinc-my.sharepoint.com/:v:/g/personal/anagaraj_concurrency_com/EfUOVypkF69JmNhnWpKIHZsBE-2rTaJC33agzfzqzQWXTA?e=KSNIl7

    Thanks,
    Abhay

  4. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 16 Jan 2020 Link to this post

    Hello, Abhay,

    Thank you for the clarification.

    I watched the video and this is indeed very strange. Our DropDownList component does not have an option for this, so I can assume that it is caused by some custom CSS rules on the page that are effecting it.

    I can suggest inspecting the list to see if there are any styles that do not come from our themes.

    Also, if sending a runnable example or live URL is possible, I will be happy to inspect it personally.

    Regards,
    Stefan
    Progress Telerik

    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 Feedback Portal and vote to affect the priority of the items
Back to Top