Ionic 4.0.0 RTL issues

[abennouna]

This issue is to collect and keep track of RTL bugs vs. master so we can make sure to properly update and fix them.

Below are:

• a list of some utilities presenting issues in RC.0,
• and a list of components with tests included in the test suite.

Legend

Symbol	Description
✅	Tested. Found compliant.
☑️	Tested. Initially not compliant or Regression. Solved by PR specified in description.
❓	Not necessarily an issue, or not a core-specific issue, or design decision.
⚠️	Not tested. Help needed.
❌	Tested. Not completely compliant. Should list the defects.

Fixed issues

CSS Utilities

• ✅ Text Alignment: text-start, text-end, text-justify, & their responsive versions
• ☑️ Float Elements: float-start, float-end, & their responsive versions (regression: Ionic 4.0.0 RTL issues #17012 (comment)) (PR fix(sass): update rtl function to prepend host with context properly #18315 solves issue in Chrome)
• ✅ Element Padding: padding-start, padding-end
• ✅ Element Margin: margin-start, margin-end
• ✅ Flex Container Properties: justify-content-start, justify-content-end

Grid

• ✅ Offsetting columns (iOS/MD) (PR: fix(col): handle RTL offset-*, pull-*, and push-* #16702)
• ✅ Push and pull (iOS/MD) (PR: fix(col): handle RTL offset-*, pull-*, and push-* #16702)

Components

• ✅ action-sheet
• alert:
  • ✅ scroller with radio in MD: position correctly (see https://gyazo.com/d1602f045193380be6d02432a7e61878)
• ✅ anchor
• ✅ avatar
• ✅ badge
• ✅ button
  • ✅ slotted icon in button in iOS
  • ✅ slotted icon in button in MD
• ✅ buttons
• ✅ card
• ✅ card-header
• ✅ checkbox
• ✅ chip
• ✅ content
• datetime
  • ☑️ picker in iOS/MD: fix start/end columns’ horizontal positioning when there are 2 or 3 picker columns (PR fix(picker): update picker columns to comply with #17018 #18339)
  • ☑️ with floating or stacked label: the datetime text should stay in the document flow (regression) (PR fix(datetime): update datetime text direction #18340)
  • ✅ picker in iOS/MD: keep the order of columns as in LTR when using time and/or DD/MM/YYYY date format (see Datetime flips HH:mm to mm:HH in RTL #16294) (PR: fix(picker): do not change column order when RTL #17018)
• fab
  • ☑️ horizontal position: position ion-fab correctly (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325)
• ✅ fab-button
• ✅ footer
• ✅ grid
  • ✅ col offsets, push, and pulls: fix offsets, pushs and pulls (PR: fix(col): handle RTL offset-*, pull-*, and push-* #16702)
• ✅ header
• ✅ icon (PR fix(icon): update to latest ionicons and add rtl test #17196)
  • ✅ arrow icons in iOS: automatic invert
  • ✅ arrow icons in MD: automatic invert
  • ✅ flip-rtl: add property to flip icons
  • ✅ detail-icon: use correct direction ("<" instead of ">") (see [ionic 4.0.2] list item icon direction on iOS mode in rtl is opposit #14958) (PR: fix(icon): fix rtl detail icon for ios #17016 REVERTED) (PR fix(icon): update to latest ionicons and add rtl test #17196)
• ✅ img
• ✅ infinite-scroll
• ✅ input (specific floating label issues are listed in the relevant components, and the issue with label and input vertical alignment is not specific to RTL)
• ✅ item (specific select, range, and floating label issues in relevant components)
• item sliding
  • ☑️ swiping direction: fix swiping direction & buttons positions (<ion-item-options> in RTL incorrect swiping direction (Ionic4) #14328) (fix(item-sliding): use the correct gesture direction and side for rtl #18366)
• label
  • ☑️ position="floating" in iOS/MD: fix horizontal floating position relative to ion-item (PR fix(sass): update rtl function to prepend host with context properly #18315)
• ✅ list
• ✅ loading
• menu
  • ☑️ outer shadow in iOS/MD: invert shadows (Ionic 4.0.0 RTL issues #17012 (comment)) (PR fix(menu): iOS + RTL (from PR 17157) #17383)
  • ❌ scrollbar in long menu: same issue than AlertController (Ionic 4.0.0 RTL issues #17012 (comment) / Ionic 4.0.0 RTL issues #17012 (comment) / https://gyazo.com/1d3033c073c854d9e09c89d934ecf50d
• ✅ menu-button
• ✅ modal
• ✅ nav
• ✅ nav-pop
• ✅ nav-push
• ✅ nav-set-root
• ✅ note
• ✅ picker
• popover
  • ✅ position in MD: position properly (PR: fix(popover): position properly in RTL / MD modes #16745)
  • ☑️ enter animation in MD: invert animation direction (PRs fix(progress-bar): RTL (from PR 17157) #17382 + fix(popover): update animation origin in RTL/MD #17645)
• progress-bar
  • ☑️ default and reverse directions: both are the same; one of them should be inverted (PR fix(progress-bar): flip rtl using the existing reversed property #17464)
  • ☑️ indeterminate / buffer: fix animations (PR fix(progress-bar): flip rtl using the existing reversed property #17464)
• ✅ radio
• ✅ radio-group
• range
  • ☑️ active range section in iOS/MD: fix position (PR fix(range): RTL (from PR 17157) #17384)
  • ☑️ knobs in iOS/MD: fix position (PR fix(range): RTL (from PR 17157) #17384)
  • ☑️ pins in MD: fix (background) position (PR fix(range): update border radius on range pin for rtl #18321)
• ✅ refresher
• ✅ reorder-group
• ✅ ripple-effect
• searchbar ([Ionic V4.0.0-beta.12] [ios] [ion-searchbar] showCancelButton has style issue in RTL #15884)
  • ✅ cancel icon in MD: invert? Maybe not since the cancelButtonIcon property allows setting own icon? ➡️icon is now inverted thanks to PR fix(icon): update to latest ionicons and add rtl test #17196
  • ☑️ cancel icon in MD: invert horizontal position (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325)
  • ☑️ clear icon in iOS: invert horizontal position (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325)
  • ☑️ clear icon in MD: invert horizontal position (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325)
  • ☑️ search icon in iOS: invert horizontal position (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325)
  • ☑️ search icon in MD: invert horizontal position (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325)
• segment
  • ☑️ first and last buttons in iOS: fix borders (PR fix(segment): update segment border for rtl #18326)
  • ❌ border in Safari: border width is not switching
• select
  • ☑️ select icon in iOS: fix position of the inner element (fix(sass): update rtl function to prepend host with context properly #18315)
  • ✅ AlertController interface: same issues than alert component
• ✅ skeleton-text
• ✅ slides
• ✅ spinner
• ✅ split-pane
• tab-bar
  • ☑️ badges: invert horizontal position (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325 solves issue in Chrome)
  • ☑️ badges in Safari: invert horizontal position
• ✅ tabs
• ✅ text
• ✅ textarea (label and input vertical alignment issue is not specific to RTL)
• ✅ thumbnail
• ✅ toast
• text
  • Float Elements: float-start, float-end, & their responsive versions in Safari
• toggle
  • ✅ swipe gesture: fix gesture direction
  • ☑️ checked toggle in iOS / MD: the handle is off (regression:
  • ❌ swipe gesture: fix gesture direction in Safari
    https://gyazo.com/b93302e08a9c43f312899736ab26717b / Ionic 4.0.0 RTL issues #17012 (comment)) (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325 fixes issue in Chrome)
  • ☑️ swipe end in iOS mode: before gesture end, the handle looks off and goes beyond the left side (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325 fixes issue in Chrome)
• toolbar ([4.0.0-beta.5] ion-back-button wrong text position in RTL #15357) (PR fix(icon): update to latest ionicons and add rtl test #17196)
  • ✅ back button in iOS: use correct direction (">" instead of "<")
  • ✅ back button in MD: use correct direction ("->" instead of "<-")
• ✅ virtual-scroll
• swipe to go back
  • gesture direction (Ionic 4.0.0 RTL issues #17012 (comment))

Existing Issues as of 4.4.1

• item-divider
  • ❌ slots margins in MD: in both slot="start" and slot="end", a small 2px margin appears on one side in LTR, but not on the opposite side in RTL (see https://i.imgur.com/4W5TFs2.png for an illustration of the problem: the box model shows the slotted ion-button))

See also: animation is not rtl-aware: #19489

Contributing

Please help with the untested components, or double-check the tested ones if you feel like it. Thank you for the contribution anyway!

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

1. Fork the Ionic repo;
2. Use the master branch;
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.

See the contributing documentation for more information.

You can also test your own app using @ionic/angular@dev

[Newbie012]

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

[abennouna]

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

[abennouna]

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

[Newbie012]

@abennouna True

[abennouna]

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

[brandyscarney]

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.

[twinssbc]

@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?

[abennouna]

@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

[MuhAssar]

@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

[abennouna]

@abuassar 🤝don't mention it!

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

[MuhAssar]

@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

[MuhAssar]

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

[abennouna]

@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

[MuhAssar]

@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?

[abennouna]

@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 fix(rtl): enable ltr default, rtl selectors #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]

@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.

[3adeling]

@abennouna

this issue: #17012 (comment)

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

ionic version: 4.7.1

[3adeling]

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!

[mrahmadt]

Not sure if this will work, I don't have access to test it, but maybe you can try :host( .fab-horizontal-center):lang(en) { margin-left: unset; } https://www.w3schools.com/cssref/sel_lang.asp

…

On Tue, Aug 6, 2019 at 10:37 PM Adel Ali ***@***.***> wrote: 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! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#17012>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAHJ3YPFJSDPK4KG7ZKD7BLQDHHIHANCNFSM4GO4IEFQ> .

[3adeling]

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

[SherifMoShalaby]

ion-slides rtl is not working properly ?
any help

[yzedayyash]

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

[SherifMoShalaby]

@brandyscarney
any updates regarding ion-slides rtl

[3alampro]

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

[SherifMoShalaby]

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

[chriswep]

@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.

[liamdebeasi]

@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?

[nourkrimesh]

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.

[3adeling]

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

#19488

[3adeling]

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

[ChiragPrajapat]

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..

[shahramSo]

@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

[timsar2]

ion-slides rtl is not working properly ?
any help

Late but i fix it by setting with of ion-sliding-options as unset

ion-item-options:not(.item-options-start){
        width: unset !important;
 }

[thetaPC]

Closing since the last known issue ("slots margins in MD") in the list was fixed and merged into main this week. Additionally the issue with "animation is not rtl-aware" was also fixed and merged.

Please use ^v7.0.1 for these fixes.

If related bugs are encountered, please open new issues for them.