0
127
ViewsBootstrap-Vue input shows warning icon on the right side in RTL app
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:
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?
1 answers
Answer question0
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.