RadzenDropDown full width for options (css)

I need to customize the RadzenDropDown options css in order to avoid the line break as showed in the image:


How can I do it ?
Thanks to support

This css will stop the wrapping however I recommend increasing the width of the dropdown.

.rz-dropdown-item {
    white-space: nowrap;

I have tryed but in this way it seems to me that is is extending the entire dropwodn list based on its option content.
What I actually want is to have something like this:


I mean to have the rendered option content enlarged with a specific width. Is it possible ?

Thanks to support

No, this isn't possible. You can however try extending the width of the dropdown with CSS:

.rz-dropdown-panel {
    width: 300px !important;

Thanks, this is exactly what I need

Hi, I notice that this css style is applyed to all the dropdown of the components.
Is there a way to apply it only to a specific drowdown ?

This is currently not possible but we will allow it with the next release:

  1. Set the id attribute of the dropdown
    <RadzenDropDown id="myDropDown">
  2. Use it to target its popup
    #popup-myDropDown {
      width: 300px !important;

Thanks korchev, I will wait for it !

I hope you are well I want to ask you if that feature is ready.

Thanks in advance

1 Like