Closed AbdElRahmanAshraf99 closed 2 months ago
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. 👏
Hello,
Please make sure that you have fully read (and applied the necessary steps) from https://quasar.dev/options/rtl-support Some thoughts:
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.
Yes, I setup it correctly and all components work correctly in RTL mode
Just to be clear. Do you still have the QDrawer bug?
Yes
i have same problem
This css fixed my problem when use rtl .q-page-container { padding-top: 50px; padding-left: 0px !important; padding-right: 57px !important; }
Someone please provide a codesandbox/repo to reproduce the issue. Thanks.
template:
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
EDIT:
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.
thank you now work correctly side="left" with commenting // source: "rtl", in postcss.config.css
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