I am trying to customize the ion-range in my app based on the wireframe. I tried to use --bar-background-active but seems not working. Please refer to my codes below. I removed the color="primary" in the ion-range attribute since the bar-background is blue also, I need to change it to gray to align with the wireframe. Hope you can help me. Thank you
Wireframe
Actual
.html
<ion-range
class="range-position"
min="1"
max="6"
dualknobs="true"
pin="false"
snaps="true"
ticks="false"
//removed the color="primary"
list="tickmarks"
[(ngModel)]="range"
(ionChange)="changeFunction($event)"
>
</ion-range>
.scss
ion-range {
--bar-background-active: #0e82c1;
--bar-background: gray;
--bar-height: 0.5px;
--knob-size: 18px;
display: block;
}
ionic info
Ionic:
Ionic CLI : 6.13.0
Ionic Framework : #ionic/angular 5.4.3
#angular-devkit/build-angular : 0.1000.8
#angular-devkit/schematics : 10.0.8
#angular/cli : 10.0.8
#ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 8.1.0, ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 21 other plugins)
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v15.3.0
npm : 7.5.4
OS : Windows 10
I have the same issue and I resolve the problem that you need to remove the color attribute. And it works perfectly :D. Good luck
Related
I have an ionic app. I need to convert the urls in the web service from https to http. I changed it but I can't connect to the web service. How can I solve this problem? Thanks.
Ionic:
Ionic CLI : 6.13.1 (C:\Users\xxx\AppData\Roaming\npm\node_modules\#ionic\cli)
Ionic Framework : #ionic/angular 5.5.2
#angular-devkit/build-angular : 0.1000.8
#angular-devkit/schematics : 10.0.8
#angular/cli : 10.0.8
#ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : 6.0.0, android 9.1.0, browser, ios 6.2.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 13 other plugins)
Utility:
cordova-res : 0.15.3
native-run : 1.3.0
System:
NodeJS : v14.15.3 (C:\Program Files\nodejs\node.exe)
npm : 6.14.9
OS : Windows 10
I don't know, which plugin, which native run time you are using.
But I am using capacitor with #ionic-native/http plugin.
Add "useClearTextTrafffic='true'" in android manifest's application tag. That's it.
I use FirebaseX to receive notification in my application.
I correctly receive notification in the background. But when the app is in the foreground, nothing happens...
I have searched for this problem, but nothing works for me.
I have try to had the following data in the data content (when server call url to send notification)
[notification_foreground] => true
[tap] => true
Here is my plugin list :
cordova-plugin-androidx-adapter 1.1.0 "cordova-plugin-androidx-adapter"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-badge 0.8.8 "Badge"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-dialogs 2.0.2 "Notification"
cordova-plugin-fcm-with-dependecy-updated 3.0.0 "Cordova FCM Push Plugin"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-firebasex 5.0.0 "Google Firebase Plugin"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.1 "cordova-plugin-ionic-webview"
cordova-plugin-local-notification 0.9.0-beta.2 "LocalNotification"
cordova-plugin-speechrecognition 1.1.2 "Speech Recognition"
cordova-plugin-splashscreen 5.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.3 "StatusBar"
cordova-plugin-whitelist 1.3.4 "Whitelist"
ionic info:
Ionic:
Ionic CLI : 5.2.8
Ionic Framework : #ionic/angular 4.9.0
#angular-devkit/build-angular : 0.13.9
#angular-devkit/schematics : 7.3.9
#angular/cli : 7.3.9
#ionic/angular-toolkit : 1.5.1
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 23 other plugins)
Utility:
cordova-res : 0.5.1
native-run : 0.2.7
System:
NodeJS : v10.16.0
npm : 6.10.1
OS : Windows 10
the code to subscribre to the message...
this.firebase.onMessageReceived().subscribe(notification => {
console.log('NOTIFICATION !!!!');
console.log(notification);
alert( JSON.stringify(notification) );
if (notification['tap']) {
this.navCtrl.navigateRoot('/test');
} else {
alert( JSON.stringify(notification) );
}
});
When the app is in the background, I receive the notification and when I tap on it, I have the alert message and console log.
But when the app is in the foreground, nothing is displayed.
Thanks for your help.
cordova-plugin-firebasex plugin isn't working with cordova-plugin-local-notification plugin I have already faced this issue into my current ionic ios application but with the android, it's working perfectly
According to #dpa99c
The problem is that both this plugin and cordova-plugin-local-notifications implements the same UNUserNotificationCenterDelegate willPresentNotification delegate and since delegates have a 1:1 relationship with their parent class, only one of the delegates is being called - in this case, the cordova-plugin-firebasex delegate in response to the notification created by cordova-plugin-local-notifications.
Please check the below link for the details description
https://github.com/dpa99c/cordova-plugin-firebasex/issues/230
Solution:
Please use this local notification plugin with cordova-plugin-firebasex It's working perfectly in android and iOS both platform
With --prod it seem to work without doing nothing else...
it's in debug mode that is not working
From https://github.com/dpa99c/cordova-plugin-firebasex#background-notifications
If the notification message arrives while the app is in running in the foreground, by default it will NOT be displayed as a system notification. Instead the notification message payload will be passed to the onMessageReceived callback for the plugin to handle (tap will not be set).
If you include the notification_foreground key in the data payload, the plugin will also display a system notification upon receiving the notification messages while the app is running in the foreground. For example:
{
"name": "my_notification",
"notification": {
"body": "Notification body",
"title": "Notification title"
},
"data": {
"notification_foreground": "true",
}
}
.Maigais
it's not about prod or QA or Debug Mode. For foreground messages to trigger you need to incorporate "notification_foreground": "true" under data Object in Notification Payload.
Example:
{
"to" : "your device token",
"notification" :{
"body" : "your message body",
"title": "your title for notification"
},
"data":{
"notification_foreground": "true"
}
}
My Ionic Info is below:
cli packages: (C:\Windows\System32\node_modules)
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : not installed
local packages:
#ionic/app-scripts : 3.1.11
Cordova Platforms : android 7.0.0 browser 5.0.4
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.11.3
npm : 6.3.0
OS : Windows 7
Hi, I have built an app and it is working fine on the browser. But on the mobile I am getting this error, screenshot is below.
Below is the reply on the browser which is working fine.
I have restarted my phone.
I have cleared the app memory.
My config.xml is below.
The reply from the server is below.
**"HTTP/1.1 200 OK\r\nContent-Type: text/plain\r\nContent-Length: 10\r\nAccess-Control-Allow-Origin: \r\nAccess-Control-Allow-Headers: \r\n\r\n" + ipStr + “”;
As you can see, I have the Access Control Allow Origin there also.
Please help as I can't seem to solve the problem.
I have been dealing with this for the past 2 weeks now.I'm building an application with Ionic3. Everything worked fine, Untill I install phonegap push plugin. Then I start to get this error
Execution failed for task ':app:transformClassesWithDexBuilderForDebug'. > com.android.build.api.transform.TransformException: java.lang.IllegalStateExce ption: Dex archives: setting .DEX extension only for .CLASS files
I have made research about this and none of the solution seemed to work for me. I have done below to app level build.gradle
defaultConfig {
multiDexEnabled true
}
i also added below code
dependencies {
compile 'com.android.support:multidex:1.0.1'
}
Then I started gettin below error
Execution failed for task ':app:transformClassesWithMultidexlistForDebug'.
> java.io.IOException: Can't write
[C:\ionic\brinmiz\platforms\android\app\build
\intermediates\multi-dex\debug\componentClasses.jar] (Can't read
[C:\ionic\brinmiz\platforms\android\app\build\intermediates\transforms\desugar\debug\17.jar(;;;;;;**.class)] (Duplicate zip entry [17.jar:android/support/v4/media/RatingCompat$1.class]))
This is my Ionic info
cli packages:
#ionic/cli-utils : 1.19.1
ionic (Ionic CLI) : 3.19.1
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
#ionic/app-scripts : 3.1.8
Cordova Platforms : android 7.0.0 ios 4.5.4
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.0.2
Node : v6.10.2
npm : 3.10.10
OS : Windows 8
Environment Variables:
ANDROID_HOME : C:\Users\Dd\AppData\Local\Android\sdk
Misc:
backend : legacy
Like I said, I have been on this for the past 2 weeks. I really need your solution
As explained here by the official documentation of Push Plugin, there is a known incompatibility between Push Plugin and another plugins that "are using an outdated way to declare dependencies such as android-support or play-services-gcm".
You can try to install cordova-android-support-gradle-release that will align various versions of the Android Support libraries specified by other plugins to a specific version.
cordova plugin add cordova-android-support-gradle-release --fetch
Also you can try to downgrade your cordova-android from 7.0.0 to 6.3.0 because there are also known issues with 7.x+. Delete your plugin folder(make sure you have all of them declared in config.xml) and run:
cordova platforms rm android
cordova platforms add android#6.3.0
If nothing do the job, update your answer with all the plugins used by your application using the next command and I will try to debug for you.
cordova plugin ls
I have created angular 5 app, installed ng-bootstrap and trying to attach bootstrap css file from node_modules: ../node_modules/bootstrap/dist/css/bootstrap.min.css. when I run ng build command I get followinf error:
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./node_modules/bootstrap/scss/bootstrap.scss
Module build failed: BrowserslistError: Unknown browser major
at error (/Users/***/dev/***/node_modules/browserslist/index.js:37:11)
at Function.browserslist.checkName (/Users/***/dev/***/node_modules/browserslist/index.js:320:18)
at Function.select (/Users/***/dev/***/node_modules/browserslist/index.js:438:37)
at /Users/***/dev/***/node_modules/browserslist/index.js:207:41
at Array.forEach (<anonymous>)
at browserslist (/Users/***/dev/***/node_modules/browserslist/index.js:196:13)
at Browsers.parse (/Users/***/dev/***/node_modules/autoprefixer/lib/browsers.js:44:14)
at new Browsers (/Users/***/dev/***/node_modules/autoprefixer/lib/browsers.js:39:28)
at loadPrefixes (/Users/***/dev/***/node_modules/autoprefixer/lib/autoprefixer.js:56:18)
at plugin (/Users/***/dev/***/node_modules/autoprefixer/lib/autoprefixer.js:62:18)
at LazyResult.run (/Users/***/dev/***/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:277:20)
at LazyResult.asyncTick (/Users/***/dev/***/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:192:32)
at LazyResult.asyncTick (/Users/***/dev/***/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:204:22)
at LazyResult.asyncTick (/Users/***/dev/***/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:204:22)
at processing.Promise.then._this2.processed (/Users/***/dev/***/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:231:20)
at new Promise (<anonymous>)
# ./node_modules/bootstrap/scss/bootstrap.scss 4:14-164
# multi ./node_modules/bootstrap/scss/bootstrap.scss ./src/styles.css
node version: 8.9.1
typescript version: 2.6.0
npm version: 5.5.1
angular version: 5.2.0
bootstrap version: ^4.0.0
ng-bootstrap version: "^1.0.0-beta.8
Any ideas?
If you are using Angular CLI with Bootstrap, you need to ensure you have these versions:
#angular/cli : 1.7.0
Bootstrap : 4.0.0
These was a breaking change when Bootstrap 4.0.0 was released, Angular CLI team addressed it with the release of 1.7.0.