Vuetify: [Bug Report] Problem with Offset Property on RTL mode

[vahidrk]

Versions and Environment

Vuetify: 1.4.3
Vue: 2.5.22
Browsers: Chrome 71.0.3578.98
OS: Windows 8.1

Steps to reproduce

1- Change app direction to RTL

2- Create a v-flex element with these properties:

• xs8
• offset-xs2

Expected Behavior

v-flex element should have "margin-right" style for right to left direction/languages

Actual Behavior

v-flex element has "margin-left" style regardless of what direction is used.

Reproduction Link

https://codepen.io/vahidrk/pen/OdpOYL

[artmarydotir]

I am having this issue too. :-(

[tamirvs]

This is what I add to my main.styl file to solve it:

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")

[MobinDev]

This is what I add to my main.styl file to solve it:

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")

Thanks <3

this is work better on multiple offset ;)

grid-offset-rtl()
  for $size, $width in $grid-breakpoints
    @media all and (min-width: $width)
      for n in (0..$grid-columns)
        .flex.offset-{$size}{n}
          margin-left: 0
          margin-right: (n / $grid-columns * 100) %

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

[johnleider]

@KaelWD I assume this is addressed with the grid refactor? We can also add it to the legacy grid if needed.

[engmah]

Still exist with Vuetify 2.0.2:

https://codepen.io/engmah/pen/pMRLvM