This is a migrated thread and some comments may be shown as answers.

@progress/kendo-react-dropdowns renders options horizontally

5 Answers 389 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Abhay
Top achievements
Rank 1
Abhay asked on 13 Jan 2020, 08:18 PM

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

Sort by
0
Stefan
Telerik team
answered on 14 Jan 2020, 11:22 AM

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
0
Abhay
Top achievements
Rank 1
answered on 14 Jan 2020, 03:36 PM

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

0
Stefan
Telerik team
answered on 16 Jan 2020, 06:32 AM

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
0
Ian
Top achievements
Rank 1
answered on 27 Mar 2021, 03:26 PM
Did you find the cause of this? I'm experiencing the exact same thing on all themes.
0
Stefan
Telerik team
answered on 29 Mar 2021, 04:56 AM

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.

Tags
General Discussions
Asked by
Abhay
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Abhay
Top achievements
Rank 1
Ian
Top achievements
Rank 1
Share this question
or