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.
5 Answers, 1 is accepted
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
Rank 1
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
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
Rank 1
Hello, Ian,
Abhay did not share what the issue was, but if you are able to send a runnable example I will be happy to see what could be causing this.
Regards,
Stefan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.