Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 11 May 2020 12:08 by ADMIN
Release 2.13.0
Sten
Created on: 31 Oct 2019 14:17
Category: UI for Blazor
Type: Feature Request
30
Dropdown components to calculate their dropdown element width to match the actual width of the component in px when PopupWidth is not set

ADMIN EDIT: see the title and the discussion on how this would be handled, it is not going to be a separate property.

 

 

As in e.g. WPF/UWP, it would be convenient to get the "actual width" of a component in order to arrange other elements to follow the same width (or height).

Consider a TelerikDropDownList with Width="100%" and I want the PopupWidth to have same width (PopupWidth="100%" will not result in same).


                <TelerikDropDownList Width="100%" PopupWidth="@(Dropdown?.Width)" @ref="Dropdown" DefaultItem="@(new Country{Name ="Select..."})"  Data="@Countries" ValueField="Abbreviation" TextField="Name" PopupHeight="400px" @bind-Value="@Employee.ContactDetails.CountryCode"></TelerikDropDownList>



    public TelerikDropDownList<Country, string> Dropdown { get; set; }

Here, I would like to set PopupWidth as below, to avoid the result in attached image.

PopupWidth="@(Dropdown?.ActualWidth)
Attached Files:
Duplicated Items
5 comments
Bobby
Posted on: 17 Feb 2020 20:34

As JR quoted, that sounds like what I am looking for. Basically I need to be able to support Desktop and Mobile device screen sized and being able to specify the Width of a TelerikDropDownList (and in my case, also TelerikMultiSelect) as a percentage. I did find a kind of work around for it, but the popup list remains at its default width (which I think is 300px)

.drop-down-full-width {
    width: 100% !important;
}

Then add that css class to the TelerikDropDownList component

<TelerikMultiSelect Data="@Units"
                                            @bind-Value="@SelectedUnits"
                                            Placeholder="Select Units..."
                                            ClearButton="true"
                                            Class="drop-down-full-width" />

It works for the Drop Down list widget, but does not affect the popup list.

JR
Posted on: 12 Feb 2020 16:43

Hello Marin,

What I can do is to rename this item to change the concept of the request - that the PopupWidth, if not set, should be taken dynamically by the component when the dropdown is supposed to open and to match the width of the component in pixels. This would mean that if you don't set PopupWidth, opening the dropdown will make its dropdown match it in width, unless you set a different value explicitly.

Would such behavior make sense and achieve what you are after?

This is exactly what we're looking for on the MultiSelect component to achieve a matching width on both large and small screens between the dropdown and the input. Hopefully this change can be made soon.

Thanks!

Sten
Posted on: 08 Nov 2019 13:30

Hi Marin,

Thanks. Yep, that title describes it better.

 

Br,

Sten 

ADMIN
Marin Bratanov
Posted on: 08 Nov 2019 12:42

Hi Sten,

I changed the title of this request to clearly denote what we would do for this scenario - if their PopupWidth is not set, the dropdown components should calculate their actual width and set it in pixels to their dropdown elements when those elements are about to show up. I cannot say yet whether this will affect the date/time pickers because it does not really make sense for them, it will probably start in the dropdownlist and combobox.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
ADMIN
Marin Bratanov
Posted on: 01 Nov 2019 06:13

Hello Sten,

This behavior cannot be avoided completely in the web, because things work differently here. The dropdown element of the component is detached from the place of rendering so it can render with a correct position and above other elements (including elements with limited dimensions, that are the bane of popup elements rendering in place). This means that when its dimensions are set in percent, they will be defined by the parent element in the DOM, not by the component dimensions.

What I can do is to rename this item to change the concept of the request - that the PopupWidth, if not set, should be taken dynamically by the component when the dropdown is supposed to open and to match the width of the component in pixels. This would mean that if you don't set PopupWidth, opening the dropdown will make its dropdown match it in width, unless you set a different value explicitly.

Would such behavior make sense and achieve what you are after?

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Create an account Log In
View
Type
Status
Category