How can i change the back button in header (arrow to the right)

Ionic Framework ionic-v3
1

i’m using this.platform.setDir(‘rtl’,true);
the back button reflect the changes, it appear to the right side of the header
but i need also the arrow the denote to the right side (right arrow like this ‘>’ instead of this ‘<’)

2

As I explained in the github thread, this happens only on version 3.3.0 of ionic, which you can try out using this version in your package 3.2.1-201705231529

It will be released later today.

Note, that RTL is not officially supported in v3 of ionic, but we are trying to add it fix by fix. You can follow to see what was merged and what is still open here - https://github.com/driftyco/ionic/pulls?q=is%3Apr+is%3Aopen+label%3Artl .

RTL also has no documentation yet, not even a post describing what we want from it. Hopefully, if all goes well, v4 will be RTL supported

3
  1. when the 3.3.0 version will be released?
    2)i have another problems in slides when using rtl and go to the next slide , nothing appear, all the forms is disappear (i’m doing a wizard form through slides)
4

Please also try the slides after updating.

If that doesn’t work, see that the slides component has an input dir which is like [dir]="'rtl'" as a temporary fix for you.
https://ionicframework.com/docs/api/components/slides/Slides/

5

okay thank you :slight_smile: i really appreciate your help

6

v3.3.0 is released now and can be used.

7

haha i used it. but now it damage the menu. i was using 2 menu one for side=left and another for side=right.
but now the two menus open from left :frowning:

8

the slide’s issue now fixed?

9

@AsimNet the slide’s menu issue not fixed till now.

10

there’s no issue on github, could you please open one?

11

i opened an issue for older version . so i think the ionic team know the issue and they are working on . hope that version 4.0.0 will fix all the rtl direction issue.

12

@AmitMY you know any thing about the menu rtl direction for the latest version. because i was abel to duplicate the menu with one for rtl and another for ltr but when i updated to the latest version 3.3.0 i can’t neither duplicate the menu nor direction = rtl working good.
could you please give me more info.

13

Correct, latest version (3.3.0) introduced a huge systematic change, and by doing so it broke components that have strict side rules.
Not that menu every worked correctly on rtl, but thats besides the point.

There is a quick fix you can apply:

[dir="rtl"] ion-menu[side=right] > .menu-inner {
    right: inherit;
    left: 0;
}

And note, that this is fixed in a PR that is ready to be merged, so I believe it will be fixed in 3.4.0
Menu was always an annoying thing on rtl, and there is a fix for changing menu side dynamically, but it is not ready yet.

14

@AmitMY also not working when switch to ltr (english) the menu open from right to left.

15

If you change the platform direction in runtime, it won’t work (known issue, has a fix)
However, if you are starting in ltr, it does open from left to right, if no side is specified on the menu, or side="left" is set.
if side="right" or side="end" it will be on the right side.

16

so confusing :frowning:
so if i change the direction in runtime on html tag using this :

this.platform.setDir(‘rtl’,true);

depend on user language so it can be :

this.platform.setDir(‘ltr’,true);

and on the menu i don’t have any attribute “side” or “dir” , what should i do to let the menu open from left if it is ltr and open from right if it is rtl ?
without animation and without removing the changing the direction in runtime ,
cause if i want to remove it i will have big change on my app.

17

Correct. If you change in runtime depending on the user’s direction, without the side attribute, it defaults to start - which means left on ltr, right on rtl.

This never worked.

Fixes coming soon:
Fix for that behavior - https://github.com/ionic-team/ionic/pull/11336
Fix for slide gesture - https://github.com/ionic-team/ionic/pull/11822

The main one is not yet complete, and I can’t give an ETA. Once the ionic team start merging some other PRs, I will pick this one up again

18

hi, i might be late, but try this

  <ion-back-button style="transform: rotate(180deg)"></ion-back-button>

i faced the same problem and this seems to have corrected the issue for my RTL application
its a bit hacky, and might amend the variables.scss later, its a mockup application for me, so i will go with this one for now.

image
image367×648 19.2 KB