I am trying to create a DropDown which contains a template: a flag icon and a dial code. However, the dropdown contents will have the flag icon, the dial code + country name. This total width when selected is like (dropdown closed) should be so wide that only the flag and dialing code is shown; however, when the dropdown is open, I would like to see a much wider panel dropdown. I tried to use the PopupStyle, setting width to 3 times bigger, however, this is not working, as the rz-dropdown-items-wrapper is set to this width, but the parent popup (rz-dropdown-panel) has a width and min-width set to the width of the dropdown itself.
This has a style on the popup
'style="display: block; box-sizing: border-box; z-index: 2000; left: 503px; top: 551.367px; width: 84px; min-width: 84px;"'
Can you give me an example of the solution? I tried the following, but without success:
.jb24-country-selector .rz-dropdown-panel.rz-popup {
min-width: max-content; /* Damit das Dropdown-Panel die Breite des breitesten Elements einnimmt /
width: auto; / Automatische Breite */
}
This is perhaps the best solution based on the current components rendering:
With the current rendering PopupStyle applies all styles to the inner element, not to the popup itself. Use the ID approach until we come up with a fix that does not break dropdowns that are already using it this way.
I think I was misunderstood. Your suggested solution doesn't work. I have a RadzenDropDown and would like the content of the DropDown panel to be wider than the DropDown itself. I'm looking for a solution like the one in the picture. And so far that hasn't worked with ID etc. or popup style. If possible, please provide a simple but complete example. Thank you.
