Log in to AnswerLog in to Follow
Bogdan Boglea
149Views
7Comments
Solved
[InputMask React] Removing right align
Question
Forge
InputMask React
Forge component by João Barata

Hello,


Can anyone help me removing the rightAlign property for the decimals mask? I saw on the github documentation some information related to this but I couldn't manage to do it in a reactive application.


https://github.com/RobinHerbots/Inputmask#rightalign


Regards,

Bogdan

1
0
on 2020-03-12

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

See solution in context
0
0
on 2020-03-12

Unfortunately this didn't work for me. Making the code changes listed above broke the script file.

I've come up with the following solution.
Add a class to the input element that forces the align left. This will overwrite the "style" element set by the InputMask componant:

Add Style Class on the element

"form-control alignLeft"

Style sheet CSS:

/* InputMaskCurrency */
.alignLeft, .form-control.alignLeft {
    text-align: left !important; 
}
0
0
on 24th Mar
Rahul Sahu
mvp_badge
MVP

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

0
1
on 2020-03-12

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

0
0
on 2020-03-12

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

0
0
on 2020-03-12

Unfortunately this didn't work for me. Making the code changes listed above broke the script file.

I've come up with the following solution.
Add a class to the input element that forces the align left. This will overwrite the "style" element set by the InputMask componant:

Add Style Class on the element

"form-control alignLeft"

Style sheet CSS:

/* InputMaskCurrency */
.alignLeft, .form-control.alignLeft {
    text-align: left !important; 
}
0
0
on 24th Mar

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,

0
0
on 2020-03-12

This would be very helpful.
We run into the same problem where this component is overwriting align:left on the input element.

0
0
on 24th Mar

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

0
0
on 2020-07-29
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.