Does anyone know of a way to force the ComboBox Popup to have an equal width to the ComboBox itself? My ComboBox doesn't have a fixed width like 300px because I am using it within a Bootstrap column. I have tried setting the Popup width to 100% but that makes it 100% of the whole page not 100% of the ComboBox width. There are some ways I can fudge the Popup width so that it is close to the ComboBox width, but I am looking for a way to have it always match the ComboBox width regardless of the ComboBox size.
Any help would be appreciated!
9 Answers, 1 is accepted
Hi Phil,
We intend to have the dropdown components behave like that out-of-the-box. You can Follow the status of this feature here: https://feedback.telerik.com/blazor/1440092-dropdown-components-to-calculate-their-dropdown-element-width-to-match-the-actual-width-of-the-component-in-px-when-popupwidth-is-not-set. I added your Vote for it to raise its priority (you can also Vote yourself for features you want to see implemented, or open new feature requests).
The behavior you see is expected, and if you set PopupWidth="100%" even after that feature is implemented you would get the same behavior. Here are more details on that: https://docs.telerik.com/blazor-ui/common-features/dimensions
If you are looking for a kind of responsive behavior on the dropdown, I can also suggest you consider something like this where the dropdown adjusts to the contents. It is a different behavior and auto height is not suitable for many elements, but it can provide a measure of tightness around the content.
<TelerikDropDownList Data="@MyList" @bind-Value="MyItem" PopupWidth="auto" PopupHeight="auto">
</TelerikDropDownList>
@code {
protected List<string> MyList = new List<string>() { "first", "lorem ipsum dolor sit amet", "third" };
protected string MyItem { get; set; } = "third";
}
Regards,
Marin Bratanov
Progress Telerik

Hi Marin,
Thank you for the information! Very excited to see this feature along with the other approved and planned features.

Along these same lines, I'm trying to figure out how to get the combobox to be the same width as the content. Or as wide as the widest entry in the drop down list. Setting PopupWidth = auto works great for the drop down list, but what about the combobox itself? Setting Width = auto doesn't have much effect.
Is this possible?
Hello Doug,
This feature was completed with our 2.13.0 release as you can see from our Feedback Portal (https://feedback.telerik.com/blazor/1440092-dropdown-components-to-calculate-their-dropdown-element-width-to-match-the-actual-width-of-the-component-in-px-when-popupwidth-is-not-set). I would suggest you upgrade (https://docs.telerik.com/blazor-ui/upgrade/overview) to that version or our latest (2.14.0 at the time of writing this) so you can take advantage of this feature. If you already have upgraded and this issue still persist you can open a Support ticket where so we can further investigate the issue.
Regards,
Svetoslav Dimitrov
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.

Hi Doug,
In such cases, it would be up to the application developer to choose - the dropdowns cannot handle both scenarios automatically at the same time. At the moment, the dropdown element is as wide as the main element in case you don't set an explicit DropDownWidth. This has been commonly requested as it greatly improves the UX for responsive layouts. When you have very long texts, however, you may want to keep using DropDownWidth="auto" so the browser will fit the dropdown element to its contents. This DropDownWidth setting and behavior applies to all dropdown components - the combobox, the dropdownlist, the multiselect and the autocomplete.
Regards,
Marin Bratanov
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.

I just can't limit the maximum height of the drop-down list, when setting the height to auto, the list is very large, there are many entries.
Is there a custom css class where max-height and overflow-y can be set?
Hello Ivan,
Our upcoming 2.21.0 release will have PopupClass on all dropdown components so you could cascade such rules per instance (such as min-width, or max-height), without breaking all other popups/dropdowns in your app.
For anyone else interested in some sort of automatic witdh setup, you can Vote for and Follow this request: https://feedback.telerik.com/blazor/1501524-add-autowidth-parameter.
Regards,
Marin Bratanov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
