fix(rtl): use CSS logical properties for problem blocks and remove ha… - #38961
fix(rtl): use CSS logical properties for problem blocks and remove ha…#38961andrey-canon wants to merge 1 commit into
Conversation
…rdcoded LTR import (#81) - Removed the explicit `@import 'vendor/bi-app/bi-app-ltr';` in `_builtin-block-variables.scss` that was overriding RTL configurations. - Replaced physical CSS properties (`left`, `padding-left`, `margin-right`) with their logical equivalents (`inset-inline-start`, `padding-inline-start`, `margin-inline-end`) in `ProblemBlockDisplay.css` to natively support bidirectional layouts.
openedx-webhooks
added
the
open-source-contribution
|
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. |
3 participants
Description
This PR fixes styling and alignment issues when the platform is rendered in Right-to-Left (RTL) languages within the Problem Blocks (choice groups, radio buttons, and checkboxes) .
Previously, the layout relied on physical CSS properties that forced elements to the left side regardless of the language direction.
Changes Made
xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css:margin-rightwithmargin-inline-end.padding-leftwithpadding-inline-start.leftwithinset-inline-start.Impact
By delegating the alignment to the browser using logical properties, elements like radio buttons and checkboxes will now automatically mirror their position based on the
dir="rtl"ordir="ltr"HTML attribute, fixing the UI without needing separate overriding stylesheets.How to Test
Checkout This branch
Set the following setting to
False:USE_EXTRACTED_PROBLEM_BLOCK = FalseCompile assets:
npm run compile-sass -- --skip-themesBefore
EN
AR
After
EN
AR