0
129
VistasLa entrada de Bootstrap-Vue muestra un icono de advertencia en el lado derecho de la aplicación RTL
Yo uso Boostrap-Vue y Vue2. Quiero usar la b-form-input . El componente proporciona un state que puede hacer que el cuadro se vuelva rojo en caso de una entrada no válida. Mi aplicación es RTL, así que quiero que el ícono rojo esté en el lado izquierdo del cuadro, pero obtengo:
El código:
<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>En el CSS tengo:
div { margin: auto 0; direction: rtl; } input { direction: rtl; }¿Cómo puedo mover el icono al lado izquierdo?
1 Respuestas
Responde la pregunta0
indicando direction: rtl no tendría ningún efecto aquí, ya que los componentes bootstrap-vue solo usan valores codificados para la direccionalidad, por lo que no es compatible con RTL.
esto no es muy limpio, pero podría anular los selectores de CSS a cargo de la validación de controles de formulario:
.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); }si desea una solución más robusta, sugeriría usar otra biblioteca, con mejor soporte (bueno, existente) para la bidireccionalidad.
después de buscar un poco, descubrí que vuetify hace lo que buscas desde el primer momento.