How to change Alert Direction into RTL?

down vote
favorite
Is there any way to change alert direction in ionic 2 ?

const alert = this.alertCtrl.create({
          title: 'خطأ',
          subTitle: 'GPS والوصول إلى الشبكة غير ممكن.',
          enableBackdropDismiss: false,
          buttons: [{
            text: 'نعم',
            handler: () => {
              setTimeout(() => this.locate(), 1500);
            }
          }],
        });

I tried and tested some css but fails.

I think ionic has pretty good support for RTL.

Apart from that, here is another way to do it.

Define a custom css class in the app.scss file like this:

.rtlAlert {
    direction: rtl;
}

Add the custom css class to the alert:

alert = this.alertCtrl.create({
  title: 'خطأ',
  subTitle: 'GPS والوصول إلى الشبكة غير ممكن.',
  cssClass: rtlAlert,
  ....
});

This should do the trick.

2 Likes

Great Help I dont understand how i missed this guide.

1 Like

I don’t understand why it is not affecting i made app.scss file and add the fallowing line

.rtlAlert { direction: rtl; }
and
cssClass: 'rtlAlert',//cssClass : string
to code.also the fallowing line to variables.scss

$app-direction: rtl;

If you want to set application wide direction then you don’t need to do what I said earlier. You can simply use the following code in your app.components.ts within the platform.ready block:

platform.setDir('rtl', true);

Amazing that nothing is affecting.

This should work, I’d suspect version incompatibilities then. I am not sure but I think this works for ionic 3+, can you please show me your ionic info? As also, post the full app.components.ts code and remove the $app-direction: rtl if you are still using it.

Another thing you can try to make sure is creating a blank app and check the code there.

app.components.ts

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.template.html',
})
export class GpsApp {
  rootPage: any = HomePage;

  @ViewChild(Nav) private nav: Nav;

  constructor(private platform: Platform) {

    platform.ready().then(() => {
      platform.setDir('rtl', true);      
window.open()
      if ((<any>window).cordova && (<any>window).cordova.InAppBrowser) {
        window.open = (<any>window).cordova.InAppBrowser.open;
      }
    });
  }

  openPage(page) {
      this.nav.setRoot(this.rootPage);
  }
}

cli packages: (D:\apps\gps-app\node_modules)

@ionic/cli-plugin-cordova       : 1.6.2
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 1.1.4
Cordova Platforms  : android 6.1.2
Ionic Framework    : ionic-angular 2.2.0

System:

Android SDK Tools : 25.2.5
Node              : v8.1.4
OS                : Windows 7
npm               : 5.3.0

Please upgrade to the latest version if possible or at least 3+. And, what is window.open doing there in your app.components.ts code??

1 Like

This worked for me. thanks. I have no idea about window.open, this code was in project when i get it.

1 Like

You are welcome! Good that ultimately it worked for you.