fix(problem): use CSS logical properties for RTL layout support - #287
fix(problem): use CSS logical properties for RTL layout support#287andrey-canon wants to merge 1 commit into
Conversation
Replace physical CSS properties (margin-right, padding-left, left) with logical properties (margin-inline-end, padding-inline-start, inset-inline-start) in ProblemBlockDisplay.css to fix choicegroup alignment issues in RTL locales.
|
Thanks for the pull request, @andrey-canon! This repository is currently maintained by Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review. 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. DetailsWhere can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources: When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
Description
This PR fixes alignment and layout issues in Right-to-Left (RTL) languages for the
ProblemBlock(xblocks_contrib.problem).Previously,
ProblemBlockDisplay.cssused physical directional properties (margin-right,padding-left,left) that forced checkboxes, radio buttons, and labels to remain LTR-aligned even when rendering the platform in RTL languages (such as Arabic).These physical properties have been replaced with CSS logical properties, allowing the browser to dynamically mirror alignments depending on the text direction (
dir="ltr"ordir="rtl").Changes Made
xblocks_contrib/problem/assets/static/css/ProblemBlockDisplay.css:margin-rightwithmargin-inline-endfor choicetextgroup inputs.padding-leftwithpadding-inline-startfor choicegroup labels.leftwithinset-inline-startfor radio buttons and checkboxes.How to Test
Checkout this branch
Run
npm installin the root directory ofxblocks-core:npm installBuild the assets:
npm run buildGo to a course page containing a problem block and verify the layout:
Before
EN
AR
After
EN
AR
NOTE
The platform contains a bug that doesn't allow to align correctly to see the full version please use this branch https://github.com/eduNEXT/edx-platform/tree/and/fix-problem-rtl
