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

Right-Align Text within the TextBox

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? :)

5 Replies

SD Saranya Dhayalan Syncfusion Team December 16, 2019 05:48 AM UTC

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;" } }; 
     .custom-class.e-control-wrapper .e-textbox { 
Please find the below API link: 
Please let us know if you need any further assistance on this. 
Saranya D 

MA Matthew December 16, 2019 07:11 PM UTC


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.


SD Saranya Dhayalan Syncfusion Team December 17, 2019 09:24 AM UTC

Hi Matthew, 
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. 
Saranya D 

BA BAx April 20, 2021 02:58 PM UTC

I guess this should be in by now?

JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team April 21, 2021 10:42 AM UTC

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. 


Live Chat Icon For mobile
Up arrow icon