rsa
August 9, 2017, 5:12pm
1
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
rsa
August 10, 2017, 12:38pm
3
Great Help I dont understand how i missed this guide.
1 Like
rsa
August 10, 2017, 5:49pm
4
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);
rsa
August 11, 2017, 5:15am
6
KishuPro:
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.
rsa
August 11, 2017, 5:00pm
8
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
rsa
August 11, 2017, 6:45pm
10
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.