Scroller inside <ion-select> on RTL isn't positioned correctly.
Demo - https://gyazo.com/d1602f045193380be6d02432a7e61878

Yes indeed, but I had a hard time debugging it to understand what's going on there... I'll just add it to the list then

@Newbie012 I noticed it's only the case with the AlertController interface, and in MD. Can you please verify?

@abennouna True

Thanks @Newbie012, added to the list under the alert component

I updated the original issue to include links to some of the open RTL issues. We can either keep those open for tracking or close them to track here.

@abennouna I notice that dir option is removed form ion-slides in v4 which is supposed to RTL when using slides component. May I know will it be added back or is there any alternative way to achieve it?

@twinssbc slides work in RTL mode out of the box as long as the document is in RTL. Are you referring to something else? PS: There is an issue though if you want to switch direction dynamically: you'd have to reload the document to keep swiper events working correctly

@abennouna I would like to thank you for your effort in making sure that all RTL issues are fixed.
Jazakallahu Khairan

I just want to mention that items inside ion-item-divider in RTL has different margins with both slot="start" and slot="end" than in LTR

@abuassar 🤝don't mention it!

Good call! I see a 2px margin that disappears in RTL mode, only in MD. Can you confirm please?

@abuassar 🤝don't mention it!

Good call! I see a 2px margin that disappears in RTL mode, only in MD. Can you confirm please?

It is not just 2px error, please check the following screen shots:

START uses slot="start"
END uses slot="end"
MIDDLE is without a slot

RTL

LTR

and here is how to recreate the issue
app.component.html:

https://gist.github.com/abuassar/bdee78a37e36cf1c5e7ddc506eed141d

unfortunately I found the same issue with ion-item:

START uses slot="start"
END uses slot="end"
MIDDLE is without a slot

demo:
app.component.html
https://gist.github.com/abuassar/d957e7b6d5079cd7f30550c91b7c4617

@abuassar am I right to assume you're not using the latest master with PR #16987? I updated the issue description to explain the test context. Here's the current render of the issue in item-divider: https://i.imgur.com/4W5TFs2.png

@abennouna you are right, I'm using rc1 as I thought it has the fix.

Would you please guide me how to use latest master with the said PR?

@abuassar I updated the issue description with the following in the "Contributing" part:

If you're not familiar with the included test suite:

1. Fork the Ionic repo;
2. Use the rtl branch (or use the master branch and merge the PR #16987);
3. Setup your local copy;
4. Run the test suite locally;
5. When you navigate to the component you want to test, you can add ?rtl=true to the url in order to check the RTL version;
6. Submit a comment with the issue.

Please let me know if it's unclear.

@twinssbc slides work in RTL mode out of the box as long as the document is in RTL. Are you referring to something else? PS: There is an issue though if you want to switch direction dynamically: you'd have to reload the document to keep swiper events working correctly

@abennouna I can confirm that slides work in the default RTL mode, no extra option is required.

I'm not able to reproduce the following:

Float Elements: float-start, float-end, & their responsive versions (regression: #17012 (comment))

@brandyscarney I can reproduce now in Safari.

Also, not sure if it helps: take float-start, the generated rules are grouped and it appears Safari ignores rules that it can't parse:

.ion-float-start,
[float-start] {
  float: left !important;
}
[dir=rtl] .ion-float-start,
:host-context([dir=rtl]) .ion-float-start,
[dir=rtl] [float-start],
:host-context([dir=rtl]) [float-start] {
  float: right !important;
}

(Safari needs the non-:host-contextones)

Stylesheet

Actually parsed CSS

Thanks @abennouna! Can you update the issue for this? Maybe we need to update the add-root-selector to return them as two separate selectors?

@brandyscarney issue updated. Returning 2 selectors in add-root-selector solves this issue. Hopefully no breaking-changes 😅

@abennouna What about ion-item-sliding RTL issue?

@shahramSo The fix is part of the 4.4.2 release. Can you share a minimal repo to reproduce your issue?

Sorry for that, see Brandy’s comment below 👇

@shahramSo The item sliding issue is fixed, it just hasn't been in a release yet. It will be in the 4.5.0 release today if all goes well, but if you need it urgently see my comment here for the dev release: #17012 (comment)

@brandyscarney Is there any way I can re-use the same SCSS written in ionic 3 app ?
@include padding(10px, 5px, 8px, 10px)

It throws me an error "No mixin named padding"

The menu works when set on startup (opens up from the right). But when it is set/changed dynamically it will open from the left. Is this a known issue?

See: https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50/

Is there any development/progress regarding RTL (when is it planned to be included in Ionic4)? Or is this community driven effort?

@abennouna

this issue: #17012 (comment)

still exist in real ios device/simulator but not in browser !

ionic version: 4.7.1

this is happening because of the following style:

:host( .fab-horizontal-center) {
margin-left: unset;
}

removing unset will solve the problem but I am not sure how to override/cancel it
I tried all other values for margin but they didn't work
only removing it will fix the issue!

thanks @mrahmadt but that didn't work

the solution is:

in global.scss

.fab-horizontal-center {
    margin-left: -28px !important;
}

also I notice that fab start position is not changing direction in RTL mode in ios simulator/device

ion-slides rtl is not working properly ?
any help

Hello, i have a problem with side menu in real IOS devices
Its open from left to right in RTL mode!!
Can any one help me with that or any one has fixed this issue

@brandyscarney
any updates regarding ion-slides rtl

any update on the RTL support for ion-slides if I changed document dir to RTL the ion-slide stop sweeping between slides

any update on the RTL support for ion-slides if I changed document dir to RTL the ion-slide stop sweeping between slides

It swipes but in the wrong direction

@abennouna i still see the issue "select icon in iOS: fix position of the inner element" on the current version, although its supposed to be fixed according to the issue description.

@abennouna It looks like columns in ion-picker do not switch position based upon LTR vs RTL mode: #21205.

Previous work seems to indicate this is intentional:

datetime
☑️ picker in iOS/MD: fix start/end columns’ horizontal positioning when there are 2 or 3 picker columns (PR #18339)
☑️ with floating or stacked label: the datetime text should stay in the document flow (regression) (PR #18340)
✅ picker in iOS/MD: keep the order of columns as in LTR when using time and/or DD/MM/YYYY date format (see #16294) (PR: #17018)

Do you recall the reasoning behind this?

Hello Everyone,
I discovered some issues with ion-item-sliding component in RTL (Ionic 5):
First:
the ion-item-options doesn't open correctly especially in iOS
I fixed it with css:
ion-item-options {
width: unset !important;
}
it fixed the problem and the option appears correct in both LTR and RTL

Second:
when I'm trying to open it programmatically with .open('end') method, it opened in LTR but with RTL it activating the class named: item-sliding-active-options-start but the side is end so it doesn't open:
To fix it I added a second ion-item-options with side="start" and after opening it and do what I want I'm removing it. It's not a good solution but It solve my problem right now.

Hey. I wonder if swipe to go back direction is already solved or not. Because the direction is not changing right now.

#19488

<ion-list> detail icon is showing wrong direction when changing direction in the same page (without reloading) using: document.documentElement.setAttribute('dir', 'ltr');

Hello, i have a problem with side menu in real IOS devices
Its open from left to right in RTL mode!!
Can any one help me with that or any one has fixed this issue

this is not working for me too..

@ChiragPrajapat, I recently reported a bug for this issue and show a walkthrough about that, check it and hope, it is useful for you.
#22116