QDrawer RTL Bug

[AbdElRahmanAshraf99]

What happened?

There is an issue when using QDrawer in RTL pages
Those changes will help to solve the problem
The problem is when using QDrawer in RTL pages, transition comes oppositely
Which means when using QDrawer side="left", css will be transition : translateX(300)
That means that it will be come from center of page to left (inside to outside) and right side also works like that and this is the problem.

What did you expect to happen?

I forked the project and solve it in this comment solution
Fixes show that when I using RTL don't check for side it will be get a correct result for animations and positioning.

Reproduction URL

https://google.com

How to reproduce?

I discussed it before.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[github-actions]

Hi @AbdElRahmanAshraf99! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[rstoenescu]

Hello,

Please make sure that you have fully read (and applied the necessary steps) from https://quasar.dev/options/rtl-support
Some thoughts:

• did you set an RTL Quasar language pack?
• did you uncomment the require('postcss-rtlcss') from your /postcss.config.cjs?

I have just verified and everything works correctly.

However, if you still think there is a problem, please provide a stackblitz/codesandbox/repo with the reproduction (links above). Otherwise there is nothing actionable from our side.

[AbdElRahmanAshraf99]

Yes, I setup it correctly and all components work correctly in RTL mode

[rstoenescu]

Just to be clear. Do you still have the QDrawer bug?

[AbdElRahmanAshraf99]

Yes

[AtiaDjaberDev]

i have same problem

[AtiaDjaberDev]

This css fixed my problem when use rtl
.q-page-container {
padding-top: 50px;
padding-left: 0px !important;
padding-right: 57px !important;
}

[rstoenescu]

Someone please provide a codesandbox/repo to reproduce the issue. Thanks.

[AtiaDjaberDev]

template:




Header

<q-drawer v-model="drawer" show-if-above :mini="miniState" @mouseover="miniState = false"
  @mouseout="miniState = true" mini-to-overlay :width="250" side="right" :breakpoint="500" bordered
  :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-1'">
  <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '0' }">
    <q-list padding>
      <q-item v-for="(page, i) in pages" :key="i" class="q-mx-xs"
        :class="{ 'active-item': page.route === $route.path }" clickable v-ripple>
        <q-item-section avatar>
          <q-icon :name="page.icon" />
        </q-item-section>

        <q-item-section>
          {{ $t(page.title) }}
        </q-item-section>
      </q-item>


    </q-list>
  </q-scroll-area>
</q-drawer>

<q-page-container>
  <router-view />
</q-page-container>

quasar.config.js:
build: {
target: {
browser: ["es2019", "edge88", "firefox78", "chrome87", "safari13.1"],
node: "node20",
},
alias: {
"@": path.join(__dirname, "./src"),
},
rtl: true
},
framework: {
config: {
rtl: true,
},
rtl: true, // Enable RTL support

  // iconSet: 'material-icons', // Quasar icon set
  lang: "ar", 

postcss.config.cjs

module.exports = {
plugins: [
// https://github.com/postcss/autoprefixer
require("autoprefixer")({
overrideBrowserslist: [
"last 4 Chrome versions",
"last 4 Firefox versions",
"last 4 Edge versions",
"last 4 Safari versions",
"last 4 Android versions",
"last 4 ChromeAndroid versions",
"last 4 FirefoxAndroid versions",
"last 4 iOS versions",
],
}),
require("postcss-rtlcss")({
/* opts */
source: "rtl",
}),

// https://github.com/elchininet/postcss-rtlcss
// If you want to support RTL css, then
// 1. yarn/npm install postcss-rtlcss
// 2. optionally set quasar.config.js > framework > lang to an RTL language
// 3. uncomment the following line:
// require('postcss-rtlcss')

],
};

@rstoenescu

[rstoenescu]

EDIT:

1. Actually, we do support it. Sorry for the confusion. Just tested it and works ok with your code. Maybe something else is missing, which is why a full codesandbox or repo for full reproduction is still required.
2. Maybe some other misunderstanding of our API has occurred? Like the "side" should be treated in LTR terms, regardless of the postcss-rtlcss "source" config.

The problem is with your postcss-rtlcss options:

require("postcss-rtlcss")({
   /* opts */
   source: "rtl", // <<<--- here
})

The source is required to be "ltr". We do not support an "rtl" source.

[AtiaDjaberDev]

thank you now work correctly
side="left"
with commenting // source: "rtl", in postcss.config.css