Right-Align Text within the TextBox

[Matthew]

Hi Have tries getting text to be right-aligned within a textbox by using the HTML attributes feature, however, what happens is that my float label on the textbox get right aligned instead of the text within the textbox

<EjsTextBox Readonly="true" Placeholder="Total Charge" HtmlAttributes="@RightAlignTextbox" FloatLabelType="FloatLabelType.Always" Value="100.00"></EjsTextBox>

@code {
    private Dictionary<string, object> RightAlignTextbox { get; set; } = new Dictionary<string, object>() { { "style", "text-align: right;" } };
}

Any way around this? Perhaps I can request a text alignment parameter for the TextBox control? :)

[Saranya Dhayalan]

Hi Matthew, 

 

Thank you for contacting Syncfusion support, 

 

We have checked your code snippet, we can achieve this by using CssClass property. By providing HtmlAtribute only root element is right aligned. Please find the below code snippet: 

@using Syncfusion.EJ2.Blazor.Inputs 

 

<EjsTextBox Readonly="true" CssClass="custom-class" Placeholder="Total Charge" HtmlAttributes="@RightAlignTextbox" FloatLabelType="FloatLabelType.Always" Value="100.00"></EjsTextBox> 

 

@code { 

    private Dictionary<string, object> RightAlignTextbox { get; set; } = new Dictionary<string, object>() { { "style", "text-align: right;" } }; 

} 

<style> 

     .custom-class.e-control-wrapper .e-textbox { 

        text-align:right; 

    } 

</style> 

 

Please find the below API link: 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_CssClass 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Saranya D 

[Matthew]

Hi,

That has worked perfectly for me, thank you for your assistance.

I am aware of the CssClass property for controls, the main issue I find with creating custom styles and applying them is that I cannot easily find any documentation to know which  css class names to extend. For example, in your solution, you have shown me that I need to extend ".e-control-wrapper .e-textbox", it would be nice if for each control you could add documentation to extend and override different parts of the rendered control css, at least for people like me who are not css experts.

Thanks

[Saranya Dhayalan]

Hi Matthew, 

 

Welcome, 

 

We have checked your query and we will update this in our documentation site. This will be available in our upcoming release. We appreciate your patience until then. 

 

Regards, 

Saranya D 

[BAx]

I guess this should be in by now?

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hello BAx, 

Good day to you. 

We are sorry for the inconvenience caused.  

We could not publish this due to complexities and this will be added and refreshed in online in Volume 1 SP1 release which is expected to be rolled out by the mid of May. 

We value your patience. 

Thanks, 

Jeyanth.