How to use the Form File Input widget of Bootstrap-Vue in RTL application?

Question

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 [email protected] 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:

Just use the postcss-rtl plugin alongside the bootstrap 5! It will do the trick for you... — Hasan Parasteh
– Hasan Parasteh, Commented Jan 25, 2022 at 22:52
@HasanParasteh Do you mean to use PostCSS-RTL with Bootstrap-Vue, should fix the RTL issues? — vesii
– vesii, Commented Jan 26, 2022 at 8:35
@LajosArpad here is the example using webpack from the postcss-rtl github repository: example setup in webpack — Hasan Parasteh
– Hasan Parasteh, Commented Jan 29, 2022 at 10:43
@vesii yeah I use this method to fix the issues with bootstrap in RTL mode. it's the easiest way to make everything look correctly.. — Hasan Parasteh
– Hasan Parasteh, Commented Jan 29, 2022 at 10:45

halfer · Accepted Answer · 2022-10-06 19:27:41Z

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-deep in 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.

Tim · Accepted Answer · 2022-01-27 16:35:08Z

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

edited Jan 27, 2022 at 16:35

answered Jan 26, 2022 at 22:20

Tim

3,11917 silver badges32 bronze badges

2 Comments

vesii Over a year ago

Hi @Tim, it does not work, since it's does not affect the b-form-file

Tim Over a year ago

@vesii - It absolutely does work... here's a CodeSandbox: codesandbox.io/s/cranky-pateu-7jfjs?file=/App.vue

Collectives™ on Stack Overflow

How to use the Form File Input widget of Bootstrap-Vue in RTL application?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related