RadzenDropDown full width for options (css)

Radzen Studio Blazor Server
1

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

image

How can I do it ?
Thanks to support

2

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

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

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:

image

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

Thanks to support

4

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

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

Thanks, this is exactly what I need

6

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 ?
Thanks

7

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;
}
8

Thanks korchev, I will wait for it !

9

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

Thanks in advance

1 Like