@kamilbrk wrote:

Hi,

According to documentation Ionic supports Android 4.4 and iOS 10 onwards. Based on this, I would think that all ionic-team plugins should follow the same version support.

Could I kindly ask what happened with the WebView plugin recently?

Version 2 was a major bump to unify iOS/Android due to integrated web server by hosting the app from http://localhost. That’s superb, since prior to this it was only on iOS and Android was running from file:// protocol. This change, however, bumped the Android support to 5+.

Later on, thanks to pull requests, 4.4 support came back, therefore we have iOS 10 and Android 4.4 again. Great.

Now, with version 3, team decided to drop GCDWebServer on iOS and bump version requirement to iOS 11.

So, on one hand, ionic-team is bringing back support for old Android (thank god!), but then drastically dropping older iOS versions? iOS 11 does not support 32-bit devices anymore, leaving iPhone 5 and others on version 10.

GCDWebServer supports iOS 8, therefore I do not understand why was it 10+ only in the first place.

I wish we could simply think about latest versions. Our use case is an app for education sector, therefore we cannot simply drop iOS10 since there are still plenty of students using older devices like iPhone 5. Same goes for our IE11 support, since it’s deployed and locked down by network administrators as the default browser, but that’s unrelated here.

If the ionic-webview plugin is the default webview in Ionic apps, why is iOS 10 not supported OR why is it claiming that iOS 10 is supported on the main documentation pages? That change being so drastic is kind of a red flag for reliability and peace of mind with production use.

Cheers!

Posts: 1

Participants: 1

Read full topic

@sufian4199 wrote:

Facing this issue. Any help on how to resolve it?

Screenshot 2018-12-24 at 8.43.08 PM.png1140x730 310 KB

Posts: 1

Participants: 1

Read full topic

@anujpunia wrote:

I tried with ionic cordova run browser -l and maps loads just fine. When I tried to run the same using Ionic Dev App, it loads a white screen and no error is thrown in the console. Also, tried to build apk and white screen comes up on mobile device as well. I am using Ionic 4 and native google maps. How to debug it as what is the issue, I have no way to understand. APK was built without any errors.

Here is the code exactly as I am using - here

APK can also be found at the same link as above.

Any help is greatly appreciated.

Posts: 1

Participants: 1

Read full topic

@rssh22 wrote:

Hi, I want to set a background image for the entire page but I can’t imagine how to achieve it.

This is what I get:

header-footer-tab-no-background.PNG377x669 128 KB

this page’s html source:

<ion-header>
  <ion-toolbar>
    <ion-title>Info. de la aplicación</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="bg-image no-scroll">

  <ion-card >
    <!-- <ion-img src="/assets/myImg.png"></ion-img> -->
    <ion-card-header>
        <ion-card-title text-center>{{name}}</ion-card-title>
        <ion-card-subtitle text-center>Version {{version}}</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
        <p>The content for this card</p>
    </ion-card-content>
</ion-card>
<ion-card>
  <ion-item>
    <!-- <ion-icon name="pin" slot="start"></ion-icon> -->
    <ion-label>Licencias</ion-label>
    <ion-button fill="solid" slot="end" (click)="openViewLicenses()">Ver</ion-button>
  </ion-item>
  <ion-item>
    <!-- <ion-icon name="pin" slot="start"></ion-icon> -->
    <ion-label>Renuncia de Responsabilidad</ion-label>
    <ion-button fill="solid" slot="end" (click)="openViewDisclaimer()">Ver</ion-button>
  </ion-item>
  <ion-card-content>
    This is content, without any paragraph or header tags,
    within an ion-card-content element.
  </ion-card-content>
</ion-card>

</ion-content>

And this is page’s scss variables file:

 .bg-image {
   background: url('../../assets/background.jpg') no-repeat center center fixed;
   background-size: cover;
 }
 .no-scroll .scroll-content {
   overflow: hidden;
 }

Any help?

Posts: 1

Participants: 1

Read full topic

@ubicak wrote:

I cant use “ids” variable in another function. Alltimes returned as undefined. How i can use this variable. This is so important for me. Because i will use this variable at http requests.

  storageGet(){
      this.storage.get('favoriteStory').then((val) => {
      this.ids = val;
    });
  }

Posts: 1

Participants: 1

Read full topic

@idan003 wrote:

Hi Guys, i upgrate from ionic 4 beta 19 to laste update [4.0.0-rc.0]
and now i have error:

compiler.js:2427 Uncaught Error: Template parse errors:
'ion-tab' is not a known element:
1. If 'ion-tab' is an Angular component, then verify that it is part of this module.
2. If 'ion-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<ion-tabs>

  [ERROR ->]<ion-tab tab="video">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
"): ng:///AppModule/TabsPage.html@2:2
'ion-tab' is not a known element:
1. If 'ion-tab' is an Angular component, then verify that it is part of this module.
2. If 'ion-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  [ERROR ->]<ion-tab tab="ebook">
    <ion-router-outlet name="ebook"></ion-router-outlet>
  </ion-tab>
"): ng:///AppModule/TabsPage.html@5:2
'ion-tab' is not a known element:
1. If 'ion-tab' is an Angular component, then verify that it is part of this module.
2. If 'ion-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    <ion-router-outlet name="ebook"></ion-router-outlet>
  </ion-tab>
  [ERROR ->]<ion-tab tab="settings">
    <ion-router-outlet name="settings"></ion-router-outlet>
  </ion-tab>

Ionic:

   ionic (Ionic CLI)             : 4.3.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.10.6
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

can some one help me with that error?

thanks

Posts: 3

Participants: 3

Read full topic

@Eldorico wrote:

Hi there!

I installed ionic in a docker image. When running the container, I open the ports 8200 and 8100:

Then, in a browser, I can access http://localhost:8100 and see the ionic app. However, I can’t access the lab when I go to http://localhost:8200 the browser (firefox) says: “connection reset by peer”. If I try http://localhost:8300, the browser says “unable to connect”.

I’m guessing that requests on port 8200 arrive somewhere in the container but are refused in there.

When I run the following command, I still have nothing. (no log when accessing through port 8200, altough I have logs when accessing trhough 8100)

ionic serve --lab -c --verbose --host 0.0.0.0

Is there any way to check what is going on? I have no idea where to start looking. There is nothing on the /var/log of the container :-/

Thanks for your advice ,
Eldorico

EDIT: thats the result of netstat -tupln. Is there a hint I could exploit?

root@a71384711be9:/home/app# netstat -tupln | grep -E "8100|8200|Proto"
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name    
tcp        0      0 0.0.0.0:8100            0.0.0.0:*               LISTEN      205/node            
tcp        0      0 127.0.0.1:8200          0.0.0.0:*               LISTEN      237/ionic-lab       
root@a71384711be9:/home/app# 

Posts: 1

Participants: 1

Read full topic

@gokujy wrote:

Hello, here i have 40 items, and i want show them in my app. If i get 10 item in home page so that way 30 item left. This 30 item i want show in next page like i add button and user click on next button to open next page show another 10 items. how can i do like this…please help

Posts: 1

Participants: 1

Read full topic

@pksquare wrote:

i have some keys in local storage

localStorage.PNG1020x147 4.92 KB

i want to clear only cartArrayValuye on submit the form. How i can do this?

Posts: 2

Participants: 2

Read full topic

@masoodkkll wrote:

1- ionic cordova build android --prod --release : success
2- keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000 : success
3- jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name : error

details error :

C:\Users\Masoud\Desktop\Ionic\app-news>jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk alias_name
Enter Passphrase for keystore:
 updating: META-INF/MANIFEST.MF
   adding: META-INF/ALIAS_NA.SF
   adding: META-INF/ALIAS_NA.RSA
  signing: AndroidManifest.xml
  signing: assets/www/1.c8c1ded9ad400bff2f40.js
  signing: assets/www/100.782d08be50f33d0e3182.js
  signing: assets/www/101.e065b049bfde52dff5ad.js
  signing: assets/www/102.9b722f5130ed0461b288.js
  signing: assets/www/103.8103538f501273fa814b.js
  signing: assets/www/104.61b3ab1dee68c8d4cc9a.js
  signing: assets/www/105.9c782119e5cca7c6591f.js
  signing: assets/www/106.76fd82f01324384fa574.js
  signing: assets/www/107.aa7817f14b28ff606ee5.js
  signing: assets/www/108.5d87f43e3a3de55b286f.js
  signing: assets/www/109.b5c91a11c0f106fc295a.js
  signing: assets/www/11.81b4443809ae25d9da52.js
  signing: assets/www/110.8f7aa122fb0fbb3f446a.js
  signing: assets/www/111.9762dfe2c1a50e903f22.js
...
  signing: res/mipmap-xhdpi-v4/icon.png
  signing: res/mipmap-xxhdpi-v4/icon.png
  signing: res/mipmap-xxxhdpi-v4/icon.png
  signing: res/xml/config.xml
  signing: resources.arsc
jar signed.

Warning:
No -tsa or -tsacert is provided and this jar is not timestamped. Without a timestamp, users may not be able to validate this jar after the signer certificate's expiration date (2046-05-12) or after any future revocation date.

Posts: 4

Participants: 2

Read full topic

@radarkwah wrote:

C:\Users\SMART\Documents\HTVSHOP> npm install @ionic/app-scripts@latest ellaneous Warnnpm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on readd when using sing Browserslist >3.0 config used in other tools. P6+NrRn3b2Cd1bnpm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscs)ellaneous Warning EINTEGRITY: sha1-Oq2tHX6f/H3NEG/ailZwRlk2Viw= integrity / due to a reqchecksum failed when using sha1: wanted sha1-Oq2tHX6f/H3NEG/ailZwRlk2Viw=
but got sha512-7JxZZAYFSCc0tP6+NrRn3b2Cd1b9d+a3+OfwVNyNsNd2unelqUMko2hm0KLts\HTVSHOP\nobC8BXcXt/OILg1E/ZgLAXSS47nw==. (70343 bytes)
npm WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
npm WARN @angular/animations@4.4.7 requires a peer of @angular/core@4.4.7
but none is installed. You must install peer dependencies yourself.
npm WARN @angular/common@5.0.3 requires a peer of @angular/core@5.0.3 but
none is installed. You must install peer dependencies yourself.
npm WARN @angular/forms@5.0.3 requires a peer of @angular/core@5.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@5.0.3 requires a peer of @angular/core@5.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/platform-browser@5.0.3 requires a peer of @angular/core@5.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/platform-browser-dynamic@5.0.3 requires a peer of @angular/core@5.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic-native/email-composer@4.18.0 requires a peer of @ionic-native/core@^4.11.0 but none is installed. You must install peer dependencies yourself.

npm ERR! path C:\Users\SMART\Documents\HTVSHOP\node_modules.node-sass.DELETE\vendor\win32-x64-57\binding.node
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink
npm ERR! Error: EPERM: operation not permitted, unlink ‘C:\Users\SMART\Documents\HTVSHOP\node_modules.node-sass.DELETE\vendor\win32-x64-57\binding.node’
npm ERR! { Error: EPERM: operation not permitted, unlink ‘C:\Users\SMART\Documents\HTVSHOP\node_modules.node-sass.DELETE\vendor\win32-x64-57\binding.node’
npm ERR! cause:
npm ERR! { Error: EPERM: operation not permitted, unlink ‘C:\Users\SMART\Documents\HTVSHOP\node_modules.node-sass.DELETE\vendor\win32-x64-57\binding.node’
npm ERR! errno: -4048,
npm ERR! code: ‘EPERM’,
npm ERR! syscall: ‘unlink’,
npm ERR! path: ‘C:\Users\SMART\Documents\HTVSHOP\node_modules\.node-sass.DELETE\vendor\win32-x64-57\binding.node’ },
npm ERR! stack: ‘Error: EPERM: operation not permitted, unlink ‘C:\Users\SMART\Documents\HTVSHOP\node_modules\.node-sass.DELETE\vendor\win32-x64-57\binding.node’’,
npm ERR! errno: -4048,
npm ERR! code: ‘EPERM’,
npm ERR! syscall: ‘unlink’,
npm ERR! path: ‘C:\Users\SMART\Documents\HTVSHOP\node_modules\.node-sass.DELETE\vendor\win32-x64-57\binding.node’,
npm ERR! parent: ‘ionicEcommerce’ }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\SMART\AppData\Roaming\npm-cache_logs\2018-12-25T19_07_31_531Z-debug.log

Posts: 1

Participants: 1

Read full topic

@keshav01vyavahare wrote:

Hi, I am developing hybrid mobile app using ionic v3 and I need to integrate Paytm payments in app. I gone through many libraries/ plugins but not succeeded.
Please can you refer/ suggest/ guide me to same.
Thank you.

Posts: 1

Participants: 1

Read full topic

@SaeedAnsari wrote:

Hello need help

My google login stopped working automatically. Facebook Authentication keeps working but Google Plus login stopped and login keeps failing

I created a new project and tested by following this link

In the new project, i cannot even build this new project i keep getting

Execution failed for task ':app:processDebugGoogleServices'.
> No matching client found for package name 'io.ionic.starter`Preformatted text`

Below is the FCM starter.build.gradle

buildscript {
    repositories {
        jcenter()
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:+'
        classpath 'com.google.gms:google-services:4.1.0'
    }
}
repositories {
    mavenCentral()
    maven {
        url "https://maven.google.com"
    }
}

dependencies {
    compile 'me.leolin:ShortcutBadger:1.1.4@aar'
    compile 'com.google.firebase:firebase-auth:+'
    compile('com.crashlytics.sdk.android:crashlytics:2.9.1@aar') {
       transitive = true
    }
}

cdvPluginPostBuildExtras.add({
    apply plugin: 'com.google.gms.google-services'
    apply plugin: 'io.fabric'
})

below is the full error log

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processDebugGoogleServices'.
> No matching client found for package name 'io.ionic.starter'

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

* Get more help at https://help.gradle.org

BUILD FAILED in 44s
26 actionable tasks: 26 executed
(node:21800) UnhandledPromiseRejectionWarning: Error: cmd: Command failed with exit code 1 Error output:
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processDebugGoogleServices'.
> No matching client found for package name 'io.ionic.starter'

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

* Get more help at https://help.gradle.org

BUILD FAILED in 44s
    at ChildProcess.whenDone (C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2\platforms\android\cordova\node_modules\cordova-common\src\superspawn.js:169:23)
    at ChildProcess.emit (events.js:182:13)
    at maybeClose (internal/child_process.js:962:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
(node:21800) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:21800) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
PS C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2> ionic cordova build android--debug
> cordova platform add android--debug --save
Using cordova-fetch for android--debug
(node:5632) UnhandledPromiseRejectionWarning: CordovaError: Failed to fetch platform android--debug
Probably this is either a connection problem, or platform spec is incorrect.
Check your connection and platform name/version/URL.
Error: cmd: Command failed with exit code 1 Error output:
npm ERR! code E404
npm ERR! 404 Not Found: android--debug@latest

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\cyber\AppData\Roaming\npm-cache\_logs\2018-12-26T06_56_51_299Z-debug.log
    at C:\Users\cyber\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\src\cordova\platform\addHelper.js:312:25
    at _rejected (C:\Users\cyber\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\node_modules\q\q.js:797:24)
    at C:\Users\cyber\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\node_modules\q\q.js:823:30
    at Promise.when (C:\Users\cyber\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:1142:31)
PS C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2> ionic cordova build android--debug
√ Creating .\www directory for you - done!
> cordova platform add android--debug --save
Using cordova-fetch for android--debug
(node:14104) UnhandledPromiseRejectionWarning: CordovaError: Failed to fetch platform android--debug
Probably this is either a connection problem, or platform spec is incorrect.
Check your connection and platform name/version/URL.
Error: cmd: Command failed with exit code 1 Error output:
npm ERR! code E404
npm ERR! 404 Not Found: android--debug@latest

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\cyber\AppData\Roaming\npm-cache\_logs\2018-12-26T06_58_07_927Z-debug.log
    at C:\Users\cyber\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\src\cordova\platform\addHelper.js:312:25
    at _rejected (C:\Users\cyber\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\node_modules\q\q.js:797:24)
    at C:\Users\cyber\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\node_modules\q\q.js:823:30
    at Promise.when (C:\Users\cyber\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:1142:31)
    at Promise.promise.promiseDispatch (C:\Users\cyber\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:808:41)
    at C:\Users\cyber\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:624:44
    at runSingle (C:\Users\cyber\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:137:13)
    at flush (C:\Users\cyber\AppData\Roaming\npm\node_modules\cordova\node_modules\q\q.js:125:13)
    at process._tickCallback (internal/process/next_tick.js:61:11)
(node:14104) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:14104) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
> ng run app:ionic-cordova-build --platform=android--debug
 91% additional asset processing scripts-webpack-pluginENOENT: no such file or directory, open 'C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2\platforms\android--debug\platform_www\cordova.js'
Error: ENOENT: no such file or directory, open 'C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2\platforms\android--debug\platform_www\cordova.js'
    at Object.openSync (fs.js:436:3)
    at Object.readFileSync (fs.js:341:35)
    at Storage.provideSync (C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:98:13)
    at CachedInputFileSystem.readFileSync (C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:259:32)
    at Observable.rxjs_1.Observable.obs [as _subscribe] (C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2\node_modules\@ngtools\webpack\src\webpack-input-host.js:35:51)
    at Observable._trySubscribe (C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2\node_modules\rxjs\internal\Observable.js:44:25)
    at Observable.subscribe (C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2\node_modules\rxjs\internal\Observable.js:30:22)
    at SyncDelegateHost._doSyncCall (C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2\node_modules\@angular-devkit\core\src\virtual-fs\host\sync.js:22:20)
    at SyncDelegateHost.read (C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2\node_modules\@angular-devkit\core\src\virtual-fs\host\sync.js:49:21)
    at WebpackCompilerHost.readFileBuffer (C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2\node_modules\@ngtools\webpack\src\compiler_host.js:124:44)
    at VirtualFileSystemDecorator.readFile (C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2\node_modules\@ngtools\webpack\src\virtual_file_system_decorator.js:39:54)
    at Promise (C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\scripts-webpack-plugin.js:92:49)
    at new Promise (<anonymous>)
    at scripts.map.fullPath (C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\scripts-webpack-plugin.js:91:24)
    at Array.map (<anonymous>)
    at hook (C:\Users\cyber\Documents\IonicRD\GoogleLoginTestV2\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\scripts-webpack-plugin.js:90:43)
[ERROR] An error occurred while running subprocess ng.

        ng run app:ionic-cordova-build --platform=android--debug exited with exit code 1.

Any help will be greatly appreciated

Posts: 1

Participants: 1

Read full topic

@hasanshykh wrote:

I’m getting a problem with using angular-formio module in ionic app. It’s giving me error ‘t.resolve is not a function’. Any solution?

Posts: 1

Participants: 1

Read full topic

@xxstefanoxx wrote:

Hi I have a problem with a background image.
I would like to put a background image to the header.
This is my code:

<ion-header>
  <ion-img cache="true" src="/assets/header.svg"></ion-img>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

The red line is the Header background, and same to work, but may ion-img tag is not transparent. I’ve try with png but not work.I ve try to set background transparent via css but not work.
If i set ion-img to background red works but not with transparent:

the img with transparent:

Schermata 2018-12-26 alle 10.28.54.jpg1630x372 55.6 KB

the img with red:

Schermata 2018-12-26 alle 10.30.06.png1418x392 62.4 KB

thanks

Posts: 1

Participants: 1

Read full topic

@hakan07 wrote:

I am trying to have grid system via using canvas at ionic. I have reasearched previous samples, but could not solve… Can’t scroll horizontally in the grid. Thanks in advance…

My code is here;

grid.html

<ion-content scrollX="true" scrollY="true">

 <canvas id="grid" (press)="pressEvent($event)"
  width="4000" height="4000"></canvas>

</ion-content>

grid.ts

 private _CANVAS  : any;
      private _CONTEXT : any;

 ionViewDidLoad() 
  {

    this.drawGrid(4001, 4001, "grid");

  }

         drawGrid(w, h, id) {
            this._CANVAS = document.getElementById(id);
            this._CONTEXT = this._CANVAS.getContext('2d');
            this._CONTEXT.beginPath();
            this._CONTEXT.canvas.width  = w;
            this._CONTEXT.canvas.height = h;

          for (w = 5; w <= 4000; w += 50) {
              this._CONTEXT.moveTo(w, 0);
              this._CONTEXT.lineTo(w, 4000);
          }
          for (h = 5; h < 4000; h += 50) {
            this._CONTEXT.moveTo(0, h);
            this._CONTEXT.lineTo(4000, h);
        }

        this._CONTEXT.strokeStyle = "#a9a9aa";
        this._CONTEXT.lineWidth = 2.5;
        this._CONTEXT.stroke();
        this._CONTEXT.font = "45px Arial"; 
        this._CONTEXT.fillStyle = 'black';

        }

Posts: 1

Participants: 1

Read full topic

@EnzoDLP wrote:

Hello,

I have a problem with my keyboard on IOS. (On android it works correctly)

Indeed, I have a page with a footer and an input (a page of chat) and when I have the focus on the input, the keyboard goes over the input …

<ion-footer>
  <ion-toolbar>
    <form [formGroup]="messageForm" class="aligner" (submit)="sendMessage(message)" novalidate>
      <ion-input class="textareastyle" autocorrect="on" autocomplete="on" type="text" [(ngModel)]="message.corps" formControlName="message" placeholder="message..." maxlength="300"></ion-input>
      <ion-buttons end class="marginauto">
        <button class="boutonovveride" type="submit" [disabled]="!messageForm.valid" ion-button icon-only>
          <img class="iconeenvoyer" src="image/send.svg">
        </button>
      </ion-buttons>
    </form>
  </ion-toolbar>
</ion-footer>

However, I have found where the problem comes from but do not know how to fix it …

When the rotation of the laptop is activated as soon as you move the mobile phone the keyboard goes over while when the rotation of the laptop is off it works properly.

So I tried several solutions including removing the preference
thinking that this would come from that since the problem only occurs when you have the rotation activated on the laptop …

But none works, I still have the same problem that is very annoying and quite urgent …

Any ideas ? Thank you

Posts: 1

Participants: 1

Read full topic

@Hammad6264 wrote:

Hey, everyone, hope you will be fine. So, I have a token of stripe with test key. I just want to charge it. Can someone help???

Posts: 1

Participants: 1

Read full topic

@DonWayo wrote:

Hi all, I have put a map with mapbox successfully, the problem is that it does not fit well to the screen, however I have seen that applies an extra css in the canavas and if I do a resize of the screen (manually) is perfectly adapted how could there be an override of the css of the canvas?

the default style of canvas on load is

<canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" width="1200" height="900" style="position: absolute; width: 400px; height: 300px;"></canvas>

2.png1513x601 165 KB

1.png1381x616 163 KB

Thanks in advance!

Posts: 1

Participants: 1

Read full topic

@maedewiza wrote:

I’ve tried many times with many ways, but I still can’t get token from Capacitor Storage, to send this into request’s Authorization header. Can you help me?

This code don’t manipulate request.

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import {
    Storage
} from '@capacitor/core';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        Storage.get({ key: 'token' }).then(token => {
            console.log(token);
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${token}`
                }
            });
        });

        return next.handle(request);
    }
}

but this code returns instead of a string with token, an [object Promise]:

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import {
    Storage
} from '@capacitor/core';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${Storage.get({ key: 'token' }).then(token => { return token;
                    })}`
                }});

        return next.handle(request);
    }
}

Posts: 1

Participants: 1

Read full topic