RadzenDropDownDataGrid popup width

Radzen.Blazor Components
1

I have a project with a lot of RadzenDropDownDataGrid and RadzenDropDown.
The problem is that they share the same class when the dropdown is generated in runtime (class="rz-dropdown-panel rz-popup").

.rz-dropdown-panel.rz-popup {
    min-width: 700px !important;

}

So when I modify the CSS, it affects all the dropdowns, instead of just the ones that contain a grid.

image
image952×768 71.2 KB

And the id is generated dynamically, so I can't use it as a differential. What solution can I apply?

Thanks.

PD: I have a subscription.

2

Hi @RomeroApen,

You can set the id attribute of your RadzenDropDownDataGrid:

<RadzenDropDownDataGrid id="mydropdown" ... />

Then the popup <div> will have the id popup-mydropdown which you can use to target it with CSS attribute selector:

#popup-mydropdown {
  min-width: 700px !important;
}
3

I have to put the ID in all of them. But it's a minor problem. Thank you so much.

4

Hello,

I am attempting to create a component that includes a RadzenDropDown, with a custom font size for both the dropdown and the items.

Setting the id attribute for the popup items like you suggested works. However, if that component is being used in a single page multiple times, dropdown behaviors are getting mixed.

How can I handle this?

Thank you.

5

Hi @korchev,
in case, when I have RadzenDropDownDataGrid on dialog window (called by DialogService.OpenAsync) dropdown with set id doesn´t work at all.

6

This is not a known issue. We would require a reproduction.

7

Hi @korchev,
I made for example two pages.
When I call test2 directly, for example from menu, it works, but called from test1 it doesn't work.
test.zip (838 Bytes)

9

Hi @korchev, I have solved it. Problem was this DialogService open twice
The same two dialogs where created, there was two identical ids on the page, than min-width was set on invisible component with same id. Generally, if we have problems with ids, it is probably caused by DialogService open twice