Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dialog: RTL is not working #3013

Closed
2bno1 opened this issue Mar 25, 2021 · 4 comments · Fixed by #3070
Closed

Dialog: RTL is not working #3013

2bno1 opened this issue Mar 25, 2021 · 4 comments · Fixed by #3070
Labels
bug This issue is a bug in the code Medium Prio TOPIC RD

Comments

@2bno1
Copy link

2bno1 commented Mar 25, 2021

Describe the bug
RTL is not working as expected for ui5-dialog

To reproduce
Steps to reproduce the behavior:

  1. https://codesandbox.io/s/naughty-vaughan-txwbf?file=/src/App.js
  2. Please notice the paragraph This is paragraph layouts as expected
  3. Please notice the elements in ui5-dialog do not layout as expected

Isolated example
https://codesandbox.io/s/naughty-vaughan-txwbf?file=/src/App.js

Expected behavior
The elements in ui5-dialog layout as RTL as expected

Screenshots
image

Context

  • UI5 Web Components version: 0.29.8
  • OS/Platform: macOS Version 11.2.3
  • Browser: Chrome Version 89.0.4389.90
@2bno1 2bno1 changed the title [Dialog] RTL is not working Dialog: RTL is not working Mar 25, 2021
@kskondov kskondov self-assigned this Mar 25, 2021
@kskondov kskondov added bug This issue is a bug in the code TOPIC RD Medium Prio labels Mar 25, 2021
@kskondov
Copy link
Contributor

Hello @SAP/ui5-webcomponents-topic-rd, RTL is not affecting dialog and popups when set in the html. Possible partial solution for the content might be to use dir="{{effectiveDir}}" in the popup template.
Best Regards,
Konstantin

@kskondov kskondov removed their assignment Mar 25, 2021
@TeodorTaushanov TeodorTaushanov self-assigned this Mar 30, 2021
@TeodorTaushanov
Copy link
Member

Hi @SAP/ui5-webcomponents-team, is there any way to set RTL globally, so each ui5 webcomponents are in rtl mode?

@TeodorTaushanov TeodorTaushanov removed their assignment Mar 31, 2021
@ilhan007
Copy link
Member

ilhan007 commented Mar 31, 2021 •
edited
Loading

There used to be a config field, we removed it. RTL is now set via the dir attribute.

<body dir="rtl"

If you need to change from LTR to RTL and vice versa dynamically at runtime, you have to use
the applyDirection method, so rtl/ltr specific styles get effect.

import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";

document.body.dir = "rtl";
applyDirection();

It is explained here: https://github.com/SAP/ui5-webcomponents/blob/master/docs/Configuration.md#rtl

@ilhan007
Copy link
Member

@TeodorTaushanov
if you inspect the shadow DOM of the Dialog,
you will notice that the dir is "ltr", although "rtl" is set on the body.

In Popup.hbs

Instead of

<section dir="{{dir}}"

you might have to use

<section dir="{{effectiveDir}}"

TeodorTaushanov added a commit that referenced this issue Mar 31, 2021
@TeodorTaushanov
fix(ui5-dialog): Fixed RTL mode
f685715 
Fixes: #3013
@TeodorTaushanov TeodorTaushanov mentioned this issue Mar 31, 2021
Merged
ilhan007 pushed a commit that referenced this issue Apr 1, 2021
@TeodorTaushanov
fix(ui5-dialog): Fixed RTL mode (#3070)
0aac048 
Fixes: #3013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug This issue is a bug in the code Medium Prio TOPIC RD
Projects
Maintenance - Topic Core
Status: Completed
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(ui5-dialog): Fixed RTL mode SAP/ui5-webcomponents
4 participants
@2bno1 @kskondov @TeodorTaushanov @ilhan007