Skip to content

ObjectPage: Header button not working with RTL #366

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.

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

Closed
lpohren opened this issue Mar 20, 2020 · 3 comments · Fixed by #369 or #394
Closed

ObjectPage: Header button not working with RTL #366

lpohren opened this issue Mar 20, 2020 · 3 comments · Fixed by #369 or #394
Assignees

Comments

@lpohren
Copy link
Contributor

lpohren commented Mar 20, 2020

Describe the bug
On the Object header, whenever we have a button in the header, RTL is not applied on it.

To Reproduce
Steps to reproduce the behavior:

  1. set dir="rtl" on the root element
  2. Open an Object page that contains a button in the header
  3. The button is still left oriented

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
image

UI5 Web Components for React Information
Operating System:
@ui5/webcomponents-react version: 0.9.0-rc.1

Additional comments
For the element in the image above, a possible solution is changing:
float: right; right: 1.25rem

for

float: left; left: 1.25rem

@MarcusNotheis
Copy link
Contributor

Hi @lpohren - just released in version 0.9.0-rc.2

@lpohren
Copy link
Contributor Author

lpohren commented Mar 27, 2020

Hi @MarcusNotheis ,
I tested it on 0.9.0-rc.3 and its still not working. I believe the issue is in the right property which should be set to none.
image

@MarcusNotheis
Copy link
Contributor

Hi @lpohren I found the root cause for this Issue. Our Custom Components expect to have a dir="rtl" attribute on any parent attribute, that's why the button was on the wrong side. UI5 Web Components for React is now automatically adding this dir attribute to the html tag when UI5 Web Components are detecting an rtl environment.
Released again in 0.9.0-rc.7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants