Home » vue » Problem with Offset Property on RTL mode in Vuetify framework

Problem with Offset Property on RTL mode in Vuetify framework

Posted by: admin November 26, 2021 Leave a comment

Questions:

I use vuecli3 and vuetify,
the problem is offset in RTL have margin-left instead of right.
Also
i config properly my vuetify.js file and html lang direction too.

Vue.use(Vuetify, {
  iconfont: 'md',
  rtl: true,
});

Also i tried to add these line to main.styl file

grid-offset-rtl()
  for $size in $grid-breakpoints
      for n in (0..$grid-columns)
        &.offset-{$size}{n}
          margin-left: 0
          margin-right: (n / $grid-columns * 100)%

rtl(grid-offset-rtl, "flex")

but still doesn’t work.

Answers:

just update Vueitfy package using npm, it is fixed now!

npm update vuetify

###

I simply solved that by using conditional props

<v-col :offset-lg="isRtl ? 2 : 0" lg="5">

isRtl is computed property that checks for rtl mode:

isRtl() {
  return this.$vuetify.rtl;
}