This is a migrated thread and some comments may be shown as answers.

Popup Width

9 Answers 1074 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Phil
Top achievements
Rank 1
Phil asked on 22 Jan 2020, 01:02 PM

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

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 22 Jan 2020, 01:12 PM

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

 UI for Blazor
0
Phil
Top achievements
Rank 1
answered on 22 Jan 2020, 01:25 PM

Hi Marin,

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

0
Doug
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 21 May 2020, 09:38 PM

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?

0
Svetoslav Dimitrov
Telerik team
answered on 22 May 2020, 07:10 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Doug
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 22 May 2020, 04:07 PM
Ah, sorry, I thought I was current but I was on 2.10. With 2.14 it works better but if you select the longest entry in the list it chops off the last couple characters when selected. So I guess for now I'll still have to set a sufficiently large width value. Thanks for the response.
0
Marin Bratanov
Telerik team
answered on 24 May 2020, 12:03 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Ivan
Top achievements
Rank 3
Iron
Iron
Iron
answered on 13 Jan 2021, 08:04 AM
We sort of figured out the width, but what to do with the height?
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?
0
Marin Bratanov
Telerik team
answered on 13 Jan 2021, 08:22 AM

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/.

0
Ivan
Top achievements
Rank 3
Iron
Iron
Iron
answered on 13 Jan 2021, 08:24 AM
Great news, many thanks!
Tags
ComboBox
Asked by
Phil
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Phil
Top achievements
Rank 1
Doug
Top achievements
Rank 1
Iron
Iron
Veteran
Svetoslav Dimitrov
Telerik team
Ivan
Top achievements
Rank 3
Iron
Iron
Iron
Share this question
or