0
283
ViewsHow to use the Form File Input widget of Bootstrap-Vue in RTL application?
I'm using the Form File Input of Bootstrap-Vue. Since my application in RTL, I want to reverse it. The current code:
<b-form-file
class="modal-input"
v-model="fileLocation"
:state="stateFileLocation"
browse-text="בחר"
placeholder="בדיקה בדיקה בדיקה" />
What I get:
How can I move the button to the other side?
EDIT: I tired using this suggestion, but without any success:
.custom-file-label::after {
left: 0;
right: auto;
border-left-width: 0;
border-right: inherit;
}
EDIT: The postcss-rtl is EOL, so I tried rtlcss by having the postcss.config.js file:
module.exports = {
plugins: {
'rtlcss':{
autoRename: true
}
}
}
Also I had to install rtlcss@2.6.2 since it depends on postcss 8 which does not work with Vue 2. The result is that it flips everything the other way around, even the text:
2 answers
Answer question0
I made a few changes to Tim's solution above to provide a bit of clarity.
In the fully functional example, linked below, I made minor changes to the example provided by Tim above.
- Added a comment to better inform how the padding to the "right" of the button is applied to give proper spacing for the placeholder text
- Used your classes and nested SCSS to avoid any confusion
- Added
::v-deepin case your style blocks are scoped (as they should be for components) - Used your placeholder language and text to fully visualize the full solution
Screenshot of working example (from the stackblitz link below):
Working example can be viewed here: https://stackblitz.com/edit/vue2-vue-cli-ozudwg?file=src/App.vue
Note: You mentioned adding additional libraries to help solve this issue to no avail. If after applying these code changes and its still not working. Please first check the versions of theses packages for mismatches and report back any inconsistencies.
"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"
}
If those all check out, temporarily remove any packages you may have installed. If it works we will know the package was interfering somehow.
If when removing the packages the solution works BUT you need that package for other areas of your application, please reinstall the packages and post back the rendered HTML that is generated in the browser, Also grab the relevant rendered CSS. This can be done using Chrome Dev Tools and inspecting the element.
If you found this solution solved your problem please credit Tim above any bounty. I simply wanted to bring clarity to the solution and potential pitfalls you may have when implementing.
0
This should do the trick:
.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
}
Here's a CodeSandbox