Dropdown list borders

[Vaidas Mikalajunas]

Hello, 

I did not find how to change Blazor dropdown list appearance - I want to have all 4 borders, not only bottom one. As I see, this component does not inherit from parent element. Please add example.

Thanks.

[Vignesh Srinivasan]

Hi Vaidas, 

 

We can able to use the e-outline CssClass to get 4 border in the dropdown list component. Please find the code below. 

 

Code snippet: 

 

@using Syncfusion.Blazor.DropDowns 

<SfDropDownList TValue="string" TItem="GameFields" PopupHeight="230px" Width="200" Placeholder="Supervisor" CssClass="e-outline" @bind-Value="@DropVal" DataSource="@Games"> 

    <DropDownListFieldSettings Value="text"></DropDownListFieldSettings> 

</SfDropDownList> 

 

<style> 

</style> 

@code{ 

 

    public string DropVal { get; set; } 

    public class GameFields 

    { 

        public string id { get; set; } 

 

        public string text { get; set; } 

    } 

 

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

        new GameFields(){ id= "Game1", text= "American Football" }, 

        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" }, 

        new GameFields(){ id= "Game8", text= "Rugby"}, 

        new GameFields(){ id= "Game9", text= "Snooker" }, 

        new GameFields(){ id= "Game10", text= "Tennis"} 

        }; 

} 

 

Screenshot: 

 

 

 

Kindly check with the above code. Please get back to us if you need further assistance. 

 

Regards, 

 

Vignesh Srinivasan.