We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Set auto width in dropdown list

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.


1 Reply 1 reply marked as answer

SP Sureshkumar P Syncfusion Team October 18, 2022 04:50 AM

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

Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon