How to use HTML element class and style attributes?

[Tom]

The stock Blazor components allow setting HTML attributes such as class and style. For example:

     <EditForm Model="@Model" style="margin:15px; grid-start-column: 1">

Why is this not possible with your components?

     <EjsDropDownList style="margin:8px; grid-start-column: 1" />

Presumably you have a good reason so what are the recommended approaches? Of course if it's documented please share.

Thank you,

Tom

[Sureshkumar P]

Hi Tom, 

 

Greetings from Syncfusion support. 

 

We can achieve your requirement using our HtmlAttributes property. kindly refer the below code example to add the style attributes to the dropdownlist component. 

 

@{ 

        Dictionary<string, object> htmlAttribute = new Dictionary<string, object>() 

{ 

        { "style", "margin: 15px; grid-start-column: 1" } , 

            {"class", "customClass" } 

    }; 

 

} 

 

<div id="ControlRegion"> 

    <div class="col-lg-12 control-section"> 

        <div class="control_wrapper"> 

            <EjsDropDownList TItem="GameFields" HtmlAttributes="@htmlAttribute" TValue="string" PopupHeight="230px" Index=2 Placeholder="Select a game" DataSource="@Games"> 

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

            </EjsDropDownList> 

        </div> 

    </div> 

</div> 

 

Regards, 

Sureshkumar P 

[Tom]

Thank you for the Sureshkumar. It's nice to know there's a solution. However, it's feels like an awkward and verbose solution.

Would you consider adding HtmlStyle and HtmlClass properties to your components given that style and class are so common? This would make doing simple things simple.

Thanks,

Tom

[Sureshkumar P]

Hi Tom, 

 

Thanks for your update. 

 

Based on your shared information, we suspect that you want to add the custom style with specific class in the component wrapper element. we have CssClass property to achieve your requirement. please find the code example below 

 

<EjsDropDownList TItem="GameFields" CssClass="customStyle" TValue="string" PopupHeight="230px" Index=2 Placeholder="Select a game" DataSource="@Games"> 

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

            </EjsDropDownList> 

 

<style> 

 

    .customStyle { 

        width: 350px; 

        margin: 0 auto; 

        padding-top: 70px; 

    } 

</style> 

 

Kindly check the above solution and let us know it meets your requirement. 

 

Regards, 

Sureshkumar P 

[Tom]

Yes Sureshkumar CssClass is a significantly better solution. Thank you.

I do still think a property that allowed direct style inlining would be useful too, e.g. CssStyle.

Cheers,

Tom

[Sureshkumar P]

Hi Tom, 

 

Query: I do still think a property that allowed direct style inlining would be useful too, e.g. CssStyle.  

 

Answer:  

            we have given the property HtmlAttributes to add the all html attributes to the specific component. So, we suggest you use the HtmlAttributes property to add the inline style as like our previous update. 

 

 

Regards, 

Sureshkumar P. 

[Pavel Plakhotniuk]

How should I work with HtmlAttributes property when it accepts only string parameter, not a dictionary? Like in DropDownListFieldSettings. Can't figure it out.

[Vignesh Srinivasan]

Hi Tom, 

 

We can achieve your requirement using our HtmlAttributes property. kindly refer the below code example to add the style attributes to the dropdownlist component.  

 

Code Snippet:  

 

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

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

</SfDropDownList> 

 

@code{ 

 

    public string DropVal { get; set; } 

    public class GameFields 

    { 

        public string id { get; set; } 

 

        public string text { get; set; } 

    } 

    Dictionary<string, object> htmlAttribute = new Dictionary<string, object>() 

{ 

        {"class", "e-manager" }, 

        {"name", "manager" }, 

        { "style", "background-color: bisque; text-align: right" }, 

        {"title", "Syncfusion DropDownList" } 

    }; 

 

    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: 

 

 

 

We have made sample based on requirement. Please find the sample below. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DropdownList-238504557 

 

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

 

Regards, 

 

Vignesh Srinivasan.