Bootstrap-Vue input shows warning icon on the right side in RTL app

user_9808098 0
Viewed 347

I use Boostrap-Vue and Vue2. I want to use the b-form-input. The component provides state which can make the box red in case of invalid input. My application is RTL so I want the red icon to be on the left side of be box but I get:

enter image description here

The code:

<div class="col-md-6">
  <div class="modal-label">HEADER</div>
  <b-form-input
   class="modal-input"
   v-model="dNumber"
   type="text"
   :state="stateDNumber"
   :trim="trimInput"/>
</div>

In the CSS I have:

div {
  margin: auto 0;
  direction: rtl;
}

input {
  direction: rtl;
}

How can I move the icon to the left side?

bootstrap-vue vuejs2 vue.js css
1 Answers

stating direction: rtl would have no effect here, as bootstrap-vue components just use hard coded values for directionality, so no RTL support.

this is not very clean, but you could override the CSS selectors in charge of form controls validation:

.form-control.is-invalid,
.form-control.is-valid,
.was-validated .form-control:invalid,
.was-validated .form-control:valid {
    /* overriding hard-coded values, quite dirty. */
    background-position: left calc(0.375em + 0.1875rem) center;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    /* this one is bluntly copied from the base rule
       in .form-control, which makes it even more dirty! */
    padding: .375rem .75rem;
    padding-left: calc(1.5em + .75rem);
}

if you want a more robust solution, i would suggest using another library, with better (well, existing) support for bi-directionality.

after a little searching, i found that vuetify does what you're after out of the box.

user_5470200
Related