Saturday, 29 January 2022

How 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:

enter image description here

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:

enter image description here



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

No comments:

Post a Comment