Custom component text alignment
A custom component has been created.
How do I dynamically align text?
* It does not work when configured as below.
SfTextBox TextBoxObj = new();
protected override void OnInitialized()
{
switch (p_Type)
{
case "1":
_type = Syncfusion.Blazor.Inputs.InputType.Text;
break;
case "2":
_type = Syncfusion.Blazor.Inputs.InputType.Password;
break;
case "3":
_type = Syncfusion.Blazor.Inputs.InputType.Number;
break;
case "4":
_type = Syncfusion.Blazor.Inputs.InputType.Email;
break;
case "5":
_type = Syncfusion.Blazor.Inputs.InputType.Search;
break;
default:
_type = Syncfusion.Blazor.Inputs.InputType.Text;
break;
}
_readonly = (p_Readonly == null || p_Readonly == "" || p_Readonly == "F") ? false : true;
_enabled = p_Enabled == null ? true : (bool)p_Enabled;
_align = (p_Align == null || p_Align == "C") ? "center" : (p_Align == "L" ? "left" : "right");
_ShowClearButton = (p_ShowClearButton == null || p_ShowClearButton == "" || p_ShowClearButton == "T") ? true : false;
_value = (p_Value == null ? "" : p_Value);
switch (p_Align)
{
case "C":
_align = "Center";
break;
case "L":
_align = "Left";
break;
case "R":
_align = "Right";
break;
default:
_align = "Center";
break;
}
TextBoxObj.HtmlAttributes = new() { { "style", "text-align:" + _align } };
StateHasChanged();
Hi junghwi,
Thank you for reaching out to us.
We've thoroughly reviewed your query regarding dynamically aligning text within a custom component. Based on your specifications, we've developed a sample to demonstrate this functionality. Please find the sample below:
<SfTextBox @ref="TextBoxObj" @bind-Value="@Name"></SfTextBox> <SfButton OnClick="ClickHander">Set Style</SfButton> <style> .custom-text .e-textbox{ text-align:center; } </style> @code { SfTextBox TextBoxObj; public string Name { get; set; } = "Syncfusion"; private void ClickHander() { TextBoxObj.CssClass = "custom-text"; } } |
Sample: https://blazorplayground.syncfusion.com/BtLJDTZYrFIsIUNB
Documentation: https://blazor.syncfusion.com/documentation/textbox/style-appearance
In this sample, we've utilized the "CssClass" property to dynamically style the input alignment. Please feel free to test this solution and let us know if you encounter any further issues or if there's anything else we can assist you with.
