Have width change dynamically in accordance to the width of the selected option

[John T]

Hello,

I currently understand the width of the dropdown control is based on the parent container, so it is a fixed width. I wanted to ask if it may be possible to have the width of the dropdown control change dynamically based on the selected item from the dropdown instead. In the example below for instance, I'd like the width to contract to the point where the down arrow is closer to the selected item "Short option". So this:

Should look like this:

And if there is a longer option, I would like the dropdown control to expand to fit the item, instead of cutting it off:

So that it looks like this:

Thank you for any advice.

[Ponmani Murugaiyan]

Hi John, 

We suggest you to use the width property of the Dropdown component to adjust the width of the component as per your requirement. 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Width 

<SfDropDownList TItem="GameFields" TValue="string" PopupHeight="230px" Placeholder="Select a game" DataSource="@Games" Width="auto"> 

    <DropDownListFieldSettings Text="Text" Value="ID" /> 

</SfDropDownList> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dropdown_Width2130707284 

Regards, 

Ponmani M 

[John T]

Hi Ponmani,

It's possible I am not explaining correctly, apologies. I'm aware of the width property but it doesn't really fulfill my requirements. In the sample that you provide, when the "Golf" selection is provided, it currently looks like this:

Instead, would it be possible to have the width be dynamically adjusted to look like this when it is selected?

Similarly for a longer item like the one below, The sample currently looks like this:

Would it be possible to have the width dynamically adjust on selection to look like this?

Thank you,

John

[Ponmani Murugaiyan]

Hi John, 

Currently we are checking your reported query, will update further details in 2 business days (February 14, 2022). 

Regards, 

Ponmani M 

[Ponmani Murugaiyan]

Hi John, 

We can achieve your requirement using JSIntrop functionality. We added a script (dropdownlist.js) file inside the wwwroot folder. When we select a value in the dropdown component, using the OnValueSelect event, we can invoke the client side OnOpen method in the dropdownlist.js file under wwwroot directory, using JSRuntime.  Please find the code here. 

[dropdownlist.js] 

 

window.OnOpen = (id, Text) => { 

    var multiObject = document.getElementById(id).parentElement; 

    var width = getTextWidth(Text, "bold 12pt arial"); 

    // 20px added for dropdownIcon width 

    multiObject.style.width = (width + 20) + "px"; 

}  

 

function getTextWidth(text, font) { 

    // re-use canvas object for better performance 

    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas")); 

    var context = canvas.getContext("2d"); 

    context.font = font; 

    var metrics = context.measureText(text); 

    return metrics.width; 

} 

[sample.razor] 

 

    public void Select(Syncfusion.Blazor.DropDowns.SelectEventArgs<GameFields> args) 

    { 

         JsRuntime.InvokeVoidAsync("OnOpen", "ddl", args.ItemData.Text); 

    } 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelectSelectAll646636072 

Regards, 

Ponmani M 

[John T]

Hi Ponmani,

Thank you for your reply. The solution you provided is close, but one caveat we have is that the dropdown list menu is sometimes updated dynamically with different values, so the option is reset dynamically as well. I mocked a razor file to recreate something similar to what is happening on our end attached and am using the javascript file that you provided above.

To reproduce the issue that I am having some trouble solving after running the app:

- Click the dropdown menu to display the list of options.

- Click the first item, "American football etc....". The dropdown width adjusts accordingly to the width of the selected item, as I would like it to.

- Click the "Change dropdown values" button

- The dropdown width doesn't dynamically adjust to the width that I would expect it to. It should be smaller in width, with less spacing

Similarly, from here, you can select an item, say "Golf". Then when you click "Change Dropdown values", The width doesn't adjust to accommodate the entirety of the placeholder "Select a game", where I would like it to.

Please let me know if this is still possible?

Thank you,

John

Attachment: Index_253aa684.zip

[Ponmani Murugaiyan]

Hi John, 

Currently we are checking your reported query. We will update further details in 2 business days (March 11, 2022). 

Regards, 

Ponmani M 

[John T]

Thank you Ponmani, just wanted to follow up on this item.

[Ponmani Murugaiyan]

Hi John, 

Sorry for the delay. We suggest you to invoke the Js method in the button click to adjust the width of the component as per your requirement. Also, you can adjust using the first item width and update the width as required. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelectSelectAll1080863792 

public void ChangeValue() 

    { 

        switchGames = !switchGames; 

        StateHasChanged(); 

        JsRuntime.InvokeVoidAsync("OnOpen", "ddl"); 

    } 

Regards, 

Ponmani M