Different CSS if the field is editable and non-editable (read-only and read-write doesnt work correctly)

0
I would like to change the CSS settings of the editable field to add a currency symbol at the end.   And it seems very simple, I create the code: .currency-field { text-align: right; position: relative; } .currency-field input { padding-right:27px; text-align:end; } .currency-field:before { position: absolute; content:"€"; padding-top: 9px; padding-right: 9px; top: 0; right: 5px; } And in the field everything works fine and looks correct. However, when the field is no longer editable (editable = false) then the currency position is incorrect. I understand that the easiest way to do this would be to separate it - different position values for a field in an editable and non-editable state, but how do I identify this state in CSS? I've tried .currency-field:read-only and for the non-editable attribute it works but :read-write doesn't show the currency in the editable field at all as in the image below (I deliberately didn't fix the currency position in :read-only yet) For such a code .currency-field:read-write ::before { position: absolute; content:"€"; padding-top: 9px; padding-right: 9px; top: 0; right: 5px; } .currency-field:read-only ::before { position: absolute; content:"€"; padding-top: 9px; padding-right: 9px; top: 0; right: 5px; } Gives such an effect Any ideas on how to change the CSS?
asked
3 answers
0

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>

.

answered
0

Hi Lukas,

In the marketplace, there is an available input widget that enables the usage of currency symbols. Grouping input digits

answered
0

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.

answered