0
285
Vistas¿Cómo usar el widget de entrada de archivo de formulario de Bootstrap-Vue en la aplicación RTL?
Estoy usando la entrada de archivo de formulario de Bootstrap-Vue. Desde mi aplicación en RTL, quiero revertirla. El código actual:
<b-form-file class="modal-input" v-model="fileLocation" :state="stateFileLocation" browse-text="בחר" placeholder="בדיקה בדיקה בדיקה" />Lo que consigo:
¿Cómo puedo mover el botón al otro lado?
EDITAR : Me cansé de usar esta sugerencia , pero sin ningún éxito:
.custom-file-label::after { left: 0; right: auto; border-left-width: 0; border-right: inherit; } EDITAR: El postcss-rtl es EOL, así que probé rtlcss teniendo el archivo postcss.config.js :
module.exports = { plugins: { 'rtlcss':{ autoRename: true } } } También tuve que instalar rtlcss@2.6.2 ya que depende de postcss 8 que no funciona con Vue 2. El resultado es que voltea todo al revés, incluso el texto:
2 Respuestas
Responde la pregunta0
Hice algunos cambios en la solución de Tim anterior para proporcionar un poco de claridad.
En el ejemplo completamente funcional, vinculado a continuación, hice cambios menores en el ejemplo proporcionado por Tim arriba.
- Se agregó un comentario para informar mejor cómo se aplica el relleno a la "derecha" del botón para brindar el espacio adecuado para el texto del marcador de posición
- Usó sus clases y SCSS anidado para evitar confusiones.
- Se agregó
::v-deepen caso de que sus bloques de estilo tengan alcance (como debería ser para los componentes) - Usó su idioma y texto de marcador de posición para visualizar completamente la solución completa
Captura de pantalla del ejemplo de trabajo (del enlace stackblitz a continuación): 
El ejemplo de trabajo se puede ver aquí: https://stackblitz.com/edit/vue2-vue-cli-ozudwg?file=src/App.vue
Nota: Mencionó agregar bibliotecas adicionales para ayudar a resolver este problema en vano. Si después de aplicar estos cambios de código y todavía no funciona. Primero verifique las versiones de estos paquetes en busca de discrepancias e informe cualquier inconsistencia.
"devDependencies": { "@vue/cli-service": "^4.5.13", "sass": "^1.22.10", "sass-loader": "^7.2.0", "vue-template-compiler": "^2.6.14" }, "dependencies": { "bootstrap": "4.5.3", "bootstrap-vue": "2.21.2", "vue": "^2.6.14" }Si todos se verifican, elimine temporalmente cualquier paquete que pueda haber instalado. Si funciona, sabremos que el paquete estaba interfiriendo de alguna manera.
Si al eliminar los paquetes la solución funciona PERO necesita ese paquete para otras áreas de su aplicación, reinstale los paquetes y publique el HTML renderizado que se genera en el navegador. También tome el CSS renderizado relevante. Esto se puede hacer usando Chrome Dev Tools e inspeccionando el elemento.
Si encontró que esta solución resolvió su problema, acredite a Tim por encima de cualquier recompensa. Simplemente quería aclarar la solución y las posibles dificultades que puede tener al implementar.
0
Esto debería funcionar:
.custom-file-label:after { left: 0; right: unset; border-right: inherit; border-left: unset; border-radius: 0; } .custom-file-label { padding-left: 75px; // adjust as needed } 
Aquí hay un CodeSandbox