Set auto width in dropdown list

[Paulo P]

Hello.

I'd like to style the dropdown list so that its input width could be adjusted to the length of the list when using PopUpWidth="auto". Actually, this the default behavior of the select element in HTML.

Would you please help?

Thanks.

[Sureshkumar P]

Hi Paulo,

We can achieve your requirement by using JSIntrop. Find the code example here:

[index.razor]

@using Syncfusion.Blazor.DropDowns

@using MultiSelectSelectAll.Data

@using Syncfusion.Blazor.Buttons

 

<SfDropDownList ID="ddl" @ref="dropObj" TItem="GameFields" Width="100%" @bind-Value="DropVal" TValue="string" PopupHeight="230px" PopupWidth="auto" Placeholder="Select a game" DataSource="@Games">

    <DropDownListEvents TItem="GameFields" TValue="string" OnValueSelect="Select" OnActionComplete="OnActionComplete"></DropDownListEvents>

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

</SfDropDownList>

 

@code {

    SfDropDownList<string, GameFields> dropObj;

    public string DropVal { get; set; } = "Game3";

    [Inject]

    protected IJSRuntime JsRuntime { get; set; }

    private WeatherForecast maskedTextBoxModel = new WeatherForecast();

 

    public class GameFields

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

    public void OnActionComplete(ActionCompleteEventArgs<GameFields> args)

    {

        JsRuntime.InvokeVoidAsync("OnActionComplete", "ddl", args.Result);

    }

    private List<GameFields> Games = new List<GameFields>() {

        new GameFields(){ ID= "", Text= "" },

        new GameFields(){ ID= "Game1", Text= "American Football check the lonmg text values" },

        new GameFields(){ ID= "Game2", Text= "Badminton" },

        new GameFields(){ ID= "Game3", Text= "Basketball" },

        new GameFields(){ ID= "Game4", Text= "Cricket" },

        new GameFields(){ ID= "Game5", Text= "Football" },

        new GameFields(){ ID= "Game6", Text= "Golf" },

        new GameFields(){ ID= "Game7", Text= "Hockey Football check the lonmg text values" },

        new GameFields(){ ID= "Game8", Text= "Rugby"},

        new GameFields(){ ID= "Game9", Text= "Snooker" },

        new GameFields(){ ID= "Game10", Text= "Tennis"},

     };

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

    {

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

    }

}

[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";

}

var tempWidth = 0;

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);

    if (tempWidth <= metrics.width) {

        tempWidth = metrics.width;

    }

}

 

window.OnActionComplete = (id, result) => {

    // initially set the component input element width based on popup element text length

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

    for (var i = 0; i < result.length; i++) {

        getTextWidth(result[i].text, "bold 12pt arial");

    }

    // 20px added for dropdownIcon width

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

}

Find the sample in the attachment:

Regards,

Sureshkumar P

Attachment: DropdownlistDymanicWidth_4f6db8ec.zip