Hi Bogdan,

when you see for decimal or number input in input mask by default property is 

text-align: right;

you can overwrite this

go to input property and set

style:"text-align: left"

Regards

Rahul Sahu

Hi Rahul,

It still doesn't work like this. It seems the style is somehow applied using the javascript from this library. I would need something in the OnReady for the screen in order to set the rightAlign property to false (or !0 idk).

See below example from the javascript where this property is set

Regards,

Bogdan

Ok,

I think I found some solution for now, in the JS (inputmask_min.js) I modified the rightAlign: 0! with rightAlign: 1! wherever it occured and now text is left aligned.

I'm sure there are also other options to do it via a JS in the screen you are using this widget, but this does the job for me as well.

Regards,

Bogdan

Hi, thanks for bringing this to my attention,

I'll try to create a new version that has more options for you to customize the behavior of the input mask.

Regards,

Hello,

If you don't want to customize the plugin you also can solve this using JS on the screen. You can do something like this in the OnReady function of your screen or web block:

Regards,

Joana Salgueiro

I have just created a JS script that you can use in the on ready Client action that capture all the inputs In which you want the text to be aligned to left. you can follow the below steps : 

1. First you can assign any text (In my case It was "PercentageInput") to the Style classes of the Input.
2. Then you can drag and drop the Java Script node to the flow to the on ready client action and copy the below JS script in the JS node and paste it there and publish. 
   function alignPercentageInputs(root) {  var percentageInputs = (root || document).querySelectorAll('input.PercentageInput');  percentageInputs.forEach(function(Input) {    Input.style.textAlign = "left";  });}
   // Initial pass on page loadalignPercentageInputs(document);
   // Observe DOM changes to catch newly inserted inputs (e.g., after Ajax refreshes)var observer = new MutationObserver(function(mutations) {  mutations.forEach(function(mutation) {    mutation.addedNodes.forEach(function(node) {      if (node.nodeType === 1) { // ELEMENT_NODE        // Align if the node itself is an input or contains inputs        if (node.matches && node.matches('input.PercentageInput')) {          node.style.textAlign = "left";        } else {          alignPercentageInputs(node);        }      }    });  });});
   observer.observe(document.body, { childList: true, subtree: true }); 

I hope it will solve the issue, and it is optimized if you have multiple Inputs and some are rendering after some conditions or later stages of the screen. If you have any more issues or question do ping me anytime.