Alignment

[Társis]

Good morning,

How can I get the SfNumericTextBox aligned to the right?

Thanks in advance!

[Ponmani Murugaiyan]

Hi Társis, 

Thanks for contacting Syncfusion support. 

We would like to inform you that, we have provided support for RTL NumericTextBox, by setting the EnableRtl property to true. 

<SfNumericTextBox TValue="int?" Value=10 EnableRtl="true"></SfNumericTextBox> 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Numeric2106652804  

Regards, 

Ponmani M 

[Kevin]

I don't think this is the answer he was looking for; what I think he wants and what I want is to justify the number to the right, which is different from rendering it from the right which is necessary for some languages, but not western languages.  It is customary to align the number to the right so that the decimal points line up.  I've tried, and failed with CSS.  Would you please provide and answer on how to accomplish this with the numeric textbox.  Thanks.

[Társis]

Kevin is right. That's what I need.

[Deepak Ramakrishnan]

Hi Kevin/Tarsis, 

 

Thanks for providing elaborated details about the requirement. 

 

We have validated the requirement in our end with provided details and found that we can achieve it by overriding the existing style of numeric textbox component. Kindly refer the below highlighted code and sample for your reference. 

 

@using Syncfusion.Blazor.Inputs 

 

<SfNumericTextBox TValue="int?" Value=10></SfNumericTextBox> 

 

<style> 

    /*The below styles is used to render the text in the right*/ 

    .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input, .e-input-group textarea.e-input, .e-input-group.e-control-wrapper textarea.e-input { 

        text-align-last: end; 

    } 

 

    /*Below styles set the left margin for the down spin arrow which seprates the icon from the text instead of showing it as sticky*/ 

    .e-input + .e-input-group-icon, .e-input-group .e-input + .e-input-group-icon, .e-input-group.e-control-wrapper .e-input + .e-input-group-icon { 

        margin-left: 10px; 

    } 

</style> 

 

 

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Numeric917929475.zip  

 

 

Thanks, 

Deepak R. 

[Kevin]

Thank you for the quick reply, and the solution I was looking for.  I'm certainly glad I asked because I am sure I would have never ventured your solution.  I really like the Syncfusion Blazor components, but the most problematic area for me has to do with the clarity of CSS modification of the components.  For example, in this instance, it would seem logical to me to simply have 'text-align:right'. ​Regardless, I very much appreciate that what you provide simply works!

[Társis]

Thank you very much!

[Deepak Ramakrishnan]

Hi Tarsis/Kevin, 

 

Thanks for the update. 

 

We are glad to hear that your requirement have fulfilled at your end. We are always happy to assist you if you need any further assistance. 

 

Thanks, 

Deepak R. 

 

[gB-Fr]

Hello,

I use that, and it works :

<SfNumericTextBox Decimals=0 style="text-align-last:end; margin-right:10px;" ShowSpinButton=false CssClass="e-outline" Placeholder="Some text" FloatLabelType="@FloatLabelType.Always" @bind-Value="@CreateEditEntity.Field"></SfNumericTextBox>

Best,

Gilles

[Sureshkumar P]

Hi GB-Fr,

Thanks for your update.

Regards,

Sureshkumar P

[Pablo Pellegrini]

Hello, I am applying the solution mentioned in this forum, and it works correctly, but when I try to use read-only, the background color does not set properly. Could someone show a way to fix it without losing the 10px margin on the right?

Pablo

[Priyanka Karthikeyan]

Hi Társis,

 

Thank you for the update. To properly apply a background color to the readonly NumericTextBox while retaining the 10px margin on the right, you can use the following CSS styles. These ensure that the design is visually consistent and the specified styles are applied effectively:

 

​<SfNumericTextBox TValue="decimal?"
                  ShowSpinButton="false"
                  Readonly="true"
                  CssClass="custom-readonly"
                  style="text-align-last:end; margin-right:10px; text-align:right;">
</SfNumericTextBox>
<style>
 .custom-readonly.e-input-group.e-control-wrapper { 
   background: #e9ecef;
  }
</style>

 

Sample: https://blazorplayground.syncfusion.com/hDrojssJKQliIHnP

 

Regards,

Priyanka K