Ok, I discovered that Text Box simply turns into text when changing the display format of a non-editable field to ‘Text’. To add currency to the end of this text you need to override the 'form-control-static' css style
.currency-field .form-control-static::after{
content:"€";
}
which has the correct effect.
But there is still the issue of the editable field. Of course, I can override the currency-field superclass but then that also affects what I've fixed - it just adds an extra currency symbol and that's even logical.
The complete code then looks like this
.currency-field {
text-align: right;
position: relative;
}
.currency-field input {
padding-right:27px;
text-align:end;
}
.currency-field .form-control-static::after{
content:"€";
}
.currency-field:before {
position: absolute;
content:"€";
padding-top: 9px;
padding-right: 9px;
top: 0;
right: 5px;
}
So I'm wondering what class to override so that, like in 'form-control-static', only the class element that applies to this box is changed.
I tried of course with 'form-control' but overriding that class with ::before has no effect, so I'm betting it must be a higher class. I've also tested what happens when I add this to the mx-textbox class but that also has no effect.
The whole call comes down to the styles 'mx-name-textBox1 currency-field mx-textbox form-group no-columns' and in the next step to 'form-control'
<div class="mx-name-textBox1 currency-field mx-textbox form-group no-columns" style="margin-bottom: 0px;">
<input id="187.module.page.textBox1_iqi_20" class="form-control" type="text" mask="" autocomplete="on" value="0,3"></div>
.
Hi Lukas,
In the marketplace, there is an available input widget that enables the usage of currency symbols. Grouping input digits
The biggest problem with this widget is that it cannot be placed in some other widgets, such as Data Grid. Because of this, I need an alternative solution.